Gatsby Buid: WebpackError: ReferenceError: self is not defined.

codeKenta commented 4 years ago

My react app is developed with Gatsby. The build-process fails on the dependency "whatwg-fetch"

My app structure is based on the following project. https://github.com/mongodb-university/stitch-tutorial-todo-web

I've found some hints on the web where they do a check for window but I can't get it to work with my structure. example: https://www.gitmemory.com/issue/gatsbyjs/gatsby/8612/527732596

Error log:

   1 | var support = {
> 2 |   searchParams: 'URLSearchParams' in self,
    | ^
  3 |   iterable: 'Symbol' in self && 'iterator' in Symbol,
  4 |   blob:
  5 |     'FileReader' in self &&

WebpackError: ReferenceError: self is not defined

  - fetch.js:2 Module../node_modules/whatwg-fetch/fetch.js
    node_modules/whatwg-fetch/fetch.js:2:1

  - BrowserFetchTransport.js:1 Module../node_modules/mongodb-stitch-browser-core/dist/esm/core/internal/net/BrowserFetchTransport.js
    node_modules/mongodb-stitch-browser-core/dist/esm/core/internal/net/BrowserFetchTransport.js:1:1

  - index.js:1 Module../node_modules/mongodb-stitch-browser-core/dist/esm/index.js
    node_modules/mongodb-stitch-browser-core/dist/esm/index.js:1:1

  - index.js:1 Module../node_modules/mongodb-stitch-browser-sdk/dist/esm/index.js
    node_modules/mongodb-stitch-browser-sdk/dist/esm/index.js:1:1`

orvillelim commented 4 years ago

+1

orvillelim commented 4 years ago

It's almost same with firebase, it needs to check the window object first

const isWindow = typeof window !== "undefined" && window  
useEffect(() => {  
if (!isWindow) return  
const { Stitch } = require("mongodb-stitch-browser-sdk")

if (!Stitch.hasAppClient("app-Xj")) {
  Stitch.initializeDefaultAppClient("app-X")
}

const stitchClient = Stitch.defaultAppClient

 }, [isWindow])`

lukephillippi commented 4 years ago

Alternatively, I've had success using the solution presented on Gatsby's Debugging HTML Builds documentation page, which customizes the webpack configuration to replace the MongoDB Stitch module(s) with a dummy module during server rendering.

As an example, adding the following to the gatsby-node.js file in your project root:

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

orvillelim commented 4 years ago

@lukephillippi I tried and your code is working on gatsby build, now the same error not working for gatsby develop

may I know your node and npm version?

mongodb / stitch-js-sdk

Gatsby Buid: WebpackError: ReferenceError: self is not defined. #381