Gatsby 使用手写笔构建 webpack 失败答案

【问题标题】：Gatsby build webpack fail with stylisGatsby 使用手写笔构建 webpack 失败
【发布时间】：2020-11-02 13:14:46
【问题描述】：

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

【问题讨论】：

标签： css reactjs webpack gatsby stylish

【解决方案1】：

更新 gatsby-config.js 以包含插件 gatsby-plugin-emotion：

module.exports = {
  plugins: [
    `gatsby-plugin-emotion`,
  ],
}

这需要重新启动 gatsby 开发过程。

【讨论】：

感谢您的回复！但这不起作用我没有使用那个插件。如何解决？
你通过安装插件和更新配置来解决！它是一个 webpack 错误..
感谢您的回复！我已经尝试添加到配置，但它仍然给出错误！

【解决方案2】：

在gatsby-node.js中添加这个sn-p：

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

有一个包试图访问 global objects such as window or document in your SSR (Server-Side Rendering) 显然没有定义（它甚至存在），因为 gatsby-build 出现在节点服务器中，而 gatsby develop 出现在浏览器端，window 存在和编译时间。使用上面的 sn-p，当 webpack 转译代码时，您正在向有问题的模块添加一个 null 加载器。

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

【讨论】：

感谢您的回复！这会导致我当前的网站出现任何问题 - 还是只是解决了包裹问题？
只是为了解决包插值问题。但是，正如我所说，您可能需要使用test: /stylis/,。查看提供的链接，这是处理使用 window 的第三方模块时的常见问题。
感谢您的回复！链接说它将删除包 - 如果我删除 /canvas/，这会导致错误吗？
它不会删除任何东西。它只是向有问题的模块添加了一个空加载器。
感谢您的回复！所以它只是在显示错误时加载null？