时间戳

首页 > 解决方案 > Gatsby 构建 webpack 因手写笔而失败

css - Gatsby 构建 webpack 因手写笔而失败

问题描述

当我运行 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 时没有错误。

标签： cssreactjswebpackgatsbystylish

解决方案

将此代码段添加到gatsby-node.js：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
          rules: [
          {
            test: /canvas/,
            use: loaders.null(),
          },
         ],
      },
    })
  } 
}

有一个包试图访问全局对象，例如window或document在您的 SSR（服务器端渲染）中，显然没有定义（它甚至存在），因为gatsby-build发生在节点服务器中，而gatsby develop发生在浏览器端，其中存在window和编译时间。null使用上面的代码片段，当 webpack 转译代码时，您正在向有问题的模块添加一个加载器。

规则测试是一个正则表达式（因此是大括号，/），它与里面的文件夹名称匹配node_modules。输出错误表明存在canvas问题，但您可能需要将其更改为/stylis/

推荐阅读