使用静态站点生成器 (Gatsby) 和 Microsoft Graph Toolkit 生成错误

Question

我正在尝试在静态站点生成器 (Gatsby) 中使用 Microsoft Graph Toolkit，但在进行服务器端构建时遇到了错误。原来的错误是：

const policy = window.trustedTypes

在lit-html 包中。我可以在 gatsby-node.js 中使用 onCreateWebpackConfig 删除它。如果我这样做了，就会在lit-element 上得到下一个错误。最终，我使用 gatsby-node.js 删除了microsoft：

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

不幸的是，现在我只能坚持：

failed Building static HTML for pages - 3.769s
error Building static HTML failed for path "/404/"


  Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and 
  additional helpful warnings.

  - react-dom-server.node.production.min.js:48 a.b.render
    [ComplianceForms-Web]/[react-dom]/cjs/react-dom-server.node.production.min.js:48:37

顺便说一句，我没有使用React.lazy 或suspense。

我正在使用https://github.com/mik3y/gatsby-starter-basic-bootstra，并在https://github.com/HiltonGiesenow/gatsby-mgt-test 进行了最少的复制。为了完整起见，我使用更简单的 Starter 进行了测试，结果相同。

Answer 1

根据Microsoft dependency installation，我认为您将null 加载程序添加到@microsoft/mgt-react 包中。所以：

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

请注意，测试规则是正则表达式，因此该值必须与 node_modules 中的文件夹名称匹配，这就是为什么您应该转义 /mgt-react 中的斜线。