[英]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 时没有错误。
更新 gatsby-config.js 以包含插件 gatsby-plugin-emotion:
module.exports = {
plugins: [
`gatsby-plugin-emotion`,
],
}
这需要重新启动 gatsby 开发过程。
在gatsby-node.js
添加这个片段:
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /canvas/,
use: loaders.null(),
},
],
},
})
}
}
有正在试图访问一个包全局对象,如window
或document
在您的SSR(S erver-的IDE [R endering) ,其中显然没有定义(甚至存在),因为gatsby-build
中的节点服务器发生,而gatsby develop
发生在浏览器端, window
所在的位置和编译时间。 使用上面的代码片段,当 webpack 转译代码时,您将向违规模块添加一个null
加载器。
规则测试是一个正则表达式(因此是大括号/
),它与node_modules
中的文件夹名称匹配。 输出错误显示canvas
问题,但您可能需要将其更改为/stylis/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.