Build Error Using Static Site Generator (Gatsby) and Microsoft Graph Toolkit

Question

I'm trying to use the Microsoft Graph Toolkit in a static site generator (Gatsby) but running into an erro doing a server side build. The original error is on:

const policy = window.trustedTypes

in the lit-html package. I can remove this using onCreateWebpackConfig in gatsby-node.js. If I do, a get the next error, on lit-element. Eventually, I got as far as removing microsoft using the, following gatsby-node.js:

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(),
            },
          ],
        },
      })
    }
  }

Unfortunately, now I'm just stuck with:

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

By the way, I'm not using React.lazy or suspense.

I'm using https://github.com/mik3y/gatsby-starter-basic-bootstra, and have a minimal repro at https://github.com/HiltonGiesenow/gatsby-mgt-test. For completeness, I've tested with an even more simple Starter, with the same result.

Answer 1

I think you add a null loader to @microsoft/mgt-react package, according to the Microsoft dependency installation. So:

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

Note that the testing rule is a regular expression so the value must match a folder name in the node_modules, that's why you should escape the slash in /mgt-react.