[英]Gatsby build webpack fail with stylis
When I run gatsby build I get this error:当我运行 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
How to solve?怎么解决? When run gatsby develop there is no error.
运行 gatsby develop 时没有错误。
Update gatsby-config.js to contain the plugin gatsby-plugin-emotion:更新 gatsby-config.js 以包含插件 gatsby-plugin-emotion:
module.exports = {
plugins: [
`gatsby-plugin-emotion`,
],
}
This needs a restart of the gatsby development process.这需要重新启动 gatsby 开发过程。
Add this snippet in the gatsby-node.js
:在
gatsby-node.js
添加这个片段:
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /canvas/,
use: loaders.null(),
},
],
},
})
}
}
There's a package that is trying to access global objects such as window
or document
in your SSR ( S erver- S ide R endering) where obviously is not defined (it even exist) because gatsby-build
occurs in the Node server while gatsby develop
occurs in the browser-side, where the window
exists and the compilation time.有正在试图访问一个包全局对象,如
window
或document
在您的SSR(S erver-的IDE [R endering) ,其中显然没有定义(甚至存在),因为gatsby-build
中的节点服务器发生,而gatsby develop
发生在浏览器端, window
所在的位置和编译时间。 With the snippet above, you are adding a null
loader to the offending module when webpack transpile the code.使用上面的代码片段,当 webpack 转译代码时,您将向违规模块添加一个
null
加载器。
The rule test is a regular expression (hence the braces, /
) that matches the folder name inside node_modules
.规则测试是一个正则表达式(因此是大括号
/
),它与node_modules
中的文件夹名称匹配。 The output error shows a canvas
issue but you may need to change it to /stylis/
输出错误显示
canvas
问题,但您可能需要将其更改为/stylis/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.