Cannot read property 'Provider' of undefined from BaseContext #31052

kmcaloon · 2021-04-23T13:43:17Z

kmcaloon
Apr 23, 2021

I guess this is very similar to #26785 (comment). I'll try to reproduce minimal repo if absolutely necessary.

Basically I just updated to v3 and ran a bunch of updates. I'm now running into the following issue during runtime:

Not exactly sure how to start troubleshooting. I do have some custom webpack config set up. When upgrading to v3 I did was running into issues related to browserify/fallbacks. Not sure if that's related but you can see any customizations here:

  actions.setWebpackConfig( {
    resolve: {
      alias: {
        path: require.resolve( 'path-browserify' ),
        '~abstracts': path.resolve( __dirname, 'src/lib/_abstracts.scss' ),
        '~static': path.resolve( __dirname, 'static' ),
        '~components': path.resolve( __dirname, 'src/components' ),
        '~src': path.resolve( __dirname, 'src' ),
      },
      fallback: {
        fs: false,
        os: false,
        tty: require.resolve( 'tty-browserify' )
      },
      extensions: ['js', 'css'],
      modules: [
        path.resolve( __dirname, 'src' ),
        path.resolve( __dirname, 'src/components' ),
        'node_modules',
        path.resolve( __dirname ),
      ],
      plugins: [
        new DirectoryNamedWebpackPlugin( {
          honorIndex: true,
        } ),
      ],
    },
    plugins: [
      plugins.provide( {
        process: 'process/browser'
      } ),
      new LoadablePlugin(),
      plugins.normalModuleReplacement(/^\.\/node\.js/, './browser.js'),
    ]
  } );

Here is some package.json info:

//....
"dependencies": {
    "@google/markerclusterer": "^2.0.8",
    "@loadable/babel-plugin": "^5.11.0",
    "@loadable/component": "^5.10.3",
    "@loadable/webpack-plugin": "^5.7.1",
    "@meronex/icons": "^4.0.0",
    "@reach/dialog": "^0.15.0",
    "@reach/menu-button": "^0.15.1",
    "@reach/visually-hidden": "^0.15.0",
    "@sanity/block-content-to-react": "^2.0.7",
    "@sanity/client": "^2.8.0",
    "@sentry/node": "^6.3.1",
    "@sentry/tracing": "^6.3.1",
    "await-to-js": "^3.0.0",
    "axios": "^0.21.1",
    "babel-plugin-import": "^1.13.3",
    "babel-plugin-styled-components": "^1.10.7",
    "babel-preset-gatsby": "^1.3.0",
    "classnames": "^2.2.6",
    "core-js": "^3.6.5",
    "date-fns": "^2.16.1",
    "date-fns-tz": "^1.0.12",
    "deasync": "^0.1.15",
    "directory-named-webpack-plugin": "^4.0.1",
    "dotenv": "^8.0.0",
    "esm": "^3.2.25",
    "fs-extra": "^9.1.0",
    "gatsby": "^3.3.1",
    "gatsby-plugin-alias-imports": "^1.0.5",
    "gatsby-plugin-compression": "^0.0.1",
    "gatsby-plugin-env-variables": "^2.1.0",
    "gatsby-plugin-facebook-pixel": "^1.0.3",
    "gatsby-plugin-google-analytics": "^3.3.0",
    "gatsby-plugin-google-gtag": "^3.3.0",
    "gatsby-plugin-groq": "^1.0.0-alpha.15",
    "gatsby-plugin-hotjar": "^1.0.1",
    "gatsby-plugin-image": "^1.3.1",
    "gatsby-plugin-import": "^2.1.4",
    "gatsby-plugin-loadable-components-ssr": "^2.1.0",
    "gatsby-plugin-manifest": "^3.3.0",
    "gatsby-plugin-minify-classnames": "^0.3.0",
    "gatsby-plugin-netlify-cache": "^1.2.0",
    "gatsby-plugin-postcss": "^4.3.0",
    "gatsby-plugin-preact": "^5.3.0",
    "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
    "gatsby-plugin-preload-link-crossorigin": "^1.0.2",
    "gatsby-plugin-purgecss": "^6.0.1",
    "gatsby-plugin-react-helmet": "^4.3.0",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-root-import": "^2.0.5",
    "gatsby-plugin-sitemap": "^3.3.0",
    "gatsby-plugin-styled-components": "^4.3.0",
    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.13",
    "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
    "gatsby-query-params": "^1.1.0",
    "gatsby-source-filesystem": "^3.3.0",
    "gatsby-source-sanity": "^7.0.4",
    "google-map-react": "^2.1.9",
    "groq-js": "0.2.0",
    "https": "^1.0.0",
    "isomorphic-unfetch": "^3.0.0",
    "js-cookie": "^2.2.1",
    "js-rich-marker": "^1.1.2",
    "load-google-maps-api": "^2.0.2",
    "mailchimp-api-v3": "^1.14.0",
    "path-browserify": "^1.0.1",
    "postcss": "^8.2.12",
    "postcss-import": "^14.0.1",
    "postcss-preset-env": "^6.7.0",
    "preact": "^10.0.5",
    "prettier": "^2.2.1",
    "process": "^0.11.10",
    "query-string": "^7.0.0",
    "react": "^17.0.2",
    "react-burgers": "^1.2.0",
    "react-ga": "^3.2.1",
    "react-helmet": "^6.1.0",
    "react-hook-form": "^7.2.3",
    "react-icons": "^4.2.0",
    "react-intersection-observer": "^8.25.2",
    "react-modal-video": "^1.2.3",
    "react-player": "^2.4.0",
    "react-scrollbars-custom": "^4.0.25",
    "react-share": "^4.1.0",
    "react-simple-img": "^2.1.9",
    "react-slick": "^0.28.1",
    "react-use": "^17.2.3",
    "slash": "^4.0.0",
    "slick-carousel": "^1.8.1",
    "slugify": "^1.4.5",
    "smooth-scroll": "^16.1.3",
    "styled-components": "^5.1.1",
    "stylelint": "^13.6.0",
    "tailwind-css-variables": "^3.0.1",
    "tailwind.macro": "^0.5.10",
    "tailwindcss": "^2.1.1",
    "tty-browserify": "^0.0.1",
    "twin.macro": "^2.3.3"
  },
  "resolutions": {
    "@babel/core": "7.12.0"
  },
//....

Does anything immediately stand out here?

LekoArts · 2021-04-26T08:34:01Z

LekoArts
Apr 26, 2021

You're modifying the alias which we internally use to map Reach Router to our own fork:

gatsby/packages/gatsby/src/utils/webpack.config.js

Lines 425 to 448 in c493ff1

    
           alias: { 
        
             gatsby$: directoryPath(path.join(`.cache`, `gatsby-browser-entry.js`)), 
        
             // Using directories for module resolution is mandatory because 
        
             // relative path imports are used sometimes 
        
             // See https://stackoverflow.com/a/49455609/6420957 for more details 
        
             "@babel/runtime": getPackageRoot(`@babel/runtime`), 
        
             "@reach/router": getPackageRoot(`@gatsbyjs/reach-router`), 
        
             "react-lifecycles-compat": directoryPath( 
        
               `.cache/react-lifecycles-compat.js` 
        
             ), 
        
             "@pmmmwh/react-refresh-webpack-plugin": getPackageRoot( 
        
               `@pmmmwh/react-refresh-webpack-plugin` 
        
             ), 
        
             "socket.io-client": getPackageRoot(`socket.io-client`), 
        
             "webpack-hot-middleware": getPackageRoot( 
        
               `@gatsbyjs/webpack-hot-middleware` 
        
             ), 
        
             $virtual: getAbsolutePathForVirtualModule(`$virtual`), 
        
             // SSR can have many react versions as some packages use their own version. React works best with 1 version. 
        
             // By resolving react,react-dom from gatsby we'll get the site versions of react & react-dom because it's specified as a peerdependency. 
        
             react: getPackageRoot(`react`), 
        
             "react-dom": getPackageRoot(`react-dom`), 
        
           },