提问人：FlutterFirebase 提问时间：11/2/2020 更新时间：11/2/2020 访问量：361
Gatsby 构建 webpack 失败，使用手写笔
Gatsby build webpack fail with stylis
问：
当我运行gatsby build时，出现以下错误：
failed Building static HTML for pages - 10.179s
ERROR #95313
Building static HTML failed
See our docs page for more info on this error: https://gatsby.dev/debug-html
343 | for (c = []; b < a; ++b) {
344 | for (var n = 0; n < m; ++n) {
> 345 | c[v++] = Z(d[n] + ' ', h[b], e).trim();
| ^
346 | }
347 | }
348 |
WebpackError: The module '/node_modules/canvas/build/Release/canvas.node'
- stylis.esm.js:345
node_modules/@emotion/stylis/dist/stylis.esm.js:345:1
- stylis.esm.js:151
node_modules/@emotion/stylis/dist/stylis.esm.js:151:1
- stylis.esm.js:175
node_modules/@emotion/stylis/dist/stylis.esm.js:175:1
- stylis.esm.js:286
node_modules/@emotion/stylis/dist/stylis.esm.js:286:1
- stylis.esm.js:151
node_modules/@emotion/stylis/dist/stylis.esm.js:151:1
- stylis.esm.js:175
node_modules/@emotion/stylis/dist/stylis.esm.js:175:1
- stylis.esm.js:286
node_modules/@emotion/stylis/dist/stylis.esm.js:286:1
- stylis.esm.js:151
如何解决？运行 gatsby develop 时没有错误。
答：
0赞
helrabelo
11/2/2020
#1
更新 gatsby-config.js 以包含插件 gatsby-plugin-emotion：
module.exports = {
plugins: [
`gatsby-plugin-emotion`,
],
}
这需要重新开始盖茨比的开发过程。
评论
0赞
FlutterFirebase
11/2/2020
感谢您的回复！但这不起作用，我没有使用那个插件。如何解决？
0赞
helrabelo
11/2/2020
您可以通过安装插件和更新配置来解决！这是一个webpack错误。
0赞
FlutterFirebase
11/2/2020
感谢您的回复！我已尝试添加到配置中，但它仍然出现错误！
0赞
Ferran Buireu
11/2/2020
#2
将此代码段添加到：gatsby-node.js
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /canvas/,
use: loaders.null(),
},
],
},
})
}
}
有一个包正在尝试访问全局对象，例如 SSR 中的窗口或文档（S erver-S ide Rendering），其中显然没有定义（它甚至存在），因为发生在 Node 服务器中，而发生在浏览器端，其中存在和编译时间。使用上面的代码片段，当 webpack 转译代码时，您将向有问题的模块添加加载器。gatsby-buildgatsby developwindownull
规则测试是一个正则表达式（因此是大括号），它与里面的文件夹名称匹配。输出错误显示问题，但您可能需要将其更改为/node_modulescanvas/stylis/
评论
0赞
FlutterFirebase
11/2/2020
感谢您的回复！这会导致我当前的网站出现任何问题 - 或者它只是解决了软件包问题？
0赞
Ferran Buireu
11/2/2020
只是为了解决包插值问题。但是，正如我所说，您可能需要使用 .看看提供的链接，这是处理使用其内容的第三方模块时的常见问题。test: /stylis/,window
0赞
FlutterFirebase
11/2/2020
感谢您的回复！链接说它将删除软件包 - 那么如果我删除会导致错误吗？/canvas/
0赞
Ferran Buireu
11/2/2020
它不会删除任何东西。它只是将一个空加载器添加到有问题的模块中。
0赞
FlutterFirebase
11/2/2020
感谢您的回复！所以它只是在显示错误时加载 null？
评论