Gatsby项目接入use-shopping-cart配置crypto-browserify解决polyfill报错

这类自定义Webpack fallback的配置，无法单纯通过在gatsby-config.js中添加现成插件完成，需要借助Gatsby暴露的Webpack配置钩子手动修改规则，整套配置流程可以完全解决use-shopping-cart调用时触发的crypto模块缺失报错。

具体配置步骤 #

• 第一步，在项目根目录安装所需的polyfill依赖：

  npm install crypto-browserify stream-browserify
  

  说明：stream-browserify是crypto-browserify的配套依赖，提前安装可以避免后续触发其他模块缺失的连锁报错。
• 第二步，打开项目根目录的gatsby-node.js文件，添加如下配置代码：

  exports.onCreateWebpackConfig = ({ setWebpackConfig }) => {
    setWebpackConfig({
      resolve: {
        fallback: {
          crypto: require.resolve('crypto-browserify'),
          stream: require.resolve('stream-browserify'),
        },
      },
    })
  }
  

• 第三步，重启本地Gatsby开发服务，让新的Webpack配置生效。

配置注意事项 #

• 不要按照报错提示的可选方案将crypto配置为false：use-shopping-cart内部的金额校验、请求签名逻辑强依赖crypto模块能力，禁用polyfill会导致购物车功能运行时出现未捕获的逻辑错误。
• 配置修改后必须重启服务：Gatsby的Webpack自定义配置不会被热更新自动重载，只有重启gatsby develop服务后规则才会注入生效。
• 区分两个核心配置文件的定位：gatsby-config.js仅负责站点元数据声明、Gatsby插件的注册与参数配置，所有涉及Webpack自定义规则的修改，都需要在gatsby-node.js中通过对应API完成注入，不存在通用插件可以一键覆盖所有依赖包的Webpack polyfill配置需求。

补充说明：如果后续配置完crypto后，还触发了其他Node核心模块（比如path、os）的缺失报错，可以按照相同的逻辑，在resolve.fallback中添加对应模块的browser版本polyfill映射即可。

内容的提问来源于stack exchange，提问作者Sanne Wintrén