Gatsby v3 + Lerna monorepo + empty starter or theme = ERROR #98124 WEBPACK

[ggdaltoso]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I'm trying to make a starter and a theme using React95 but I ran into a weird error when running gatsby develop in an almost clean project.

The issue just appears when I'm using Gatsby v3 and works fine on v2.

Besides all other packages into React95 project, the structure for Gatsby thing is separated into:

• @react95/explorer: as the Gatsby starter template
• @react95/gatsby-theme: well, as the Gatsby theme

You could notice that the starter uses the theme as a dependency but the error persists even without this relation.

Reproduction Link

https://github.com/React95/React95/tree/feat/gatsby-theme-v3

Steps to Reproduce

v2 - Working steps

1. Clone the React95 repo and go to feat/gatsby-theme-v3 branch
2. run yarn to install dependencies
3. yarn dev:explorer or yarn workspace @react95/explorer develop
4. See it working

v3 - Not working steps

1. Clone the React95 repo and go to feat/gatsby-theme-v3 branch
2. change the gatsby versions for the starter and the theme packages (^2.15.21 -> ^3.12.0)
3. rm yarn.lock
4. run yarn to install dependencies
5. yarn dev:explorer or yarn workspace @react95/explorer develop
6. See the error in your console

Expected Result

The same as running with v2:

➜  React95 git:(feat/gatsby-theme) yarn dev:explorer    
yarn run v1.22.1
$ yarn workspace @react95/explorer develop
$ gatsby develop

 ERROR 

Unexpected key "html" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "nodes", "logs", "pages", "redirects",
"schema", "definitions", "staticQueryComponents", "status", "webpack", "pageData", "themes", "webpackCompilationHash", "config", "lastAction", "jobsV2", "pageDataStats",
"components", "babelrc", "jobs", "nodesByType", "program", "resolvedNodesCache", "nodesTouched", "flattenedPlugins", "pendingPageDataWrites", "schemaCustomization",
"inferenceMetadata", "staticQueriesByTemplate", "queries", "visitedPages". Unexpected keys will be ignored.

success open and validate gatsby-configs - 0.070s
success load plugins - 0.051s
success onPreInit - 0.017s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.028s
success copy gatsby files - 0.407s
success onPreBootstrap - 0.011s
success createSchemaCustomization - 0.002s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.025s
success building schema - 0.136s
info Total nodes: 18, SitePage nodes: 1 (use --verbose for breakdown)
success createPages - 0.002s
success Checking for changed pages - 0.001s
success createPagesStatefully - 0.026s
success update schema - 0.023s
success write out redirect data - 0.003s
success onPostBootstrap - 0.002s
info bootstrap finished - 3.426s
success onPreExtractQueries - 0.002s
success extract queries from components - 0.068s
success write out requires - 0.006s
success run page queries - 0.016s - 1/1 61.13/s
⠀
You can now view @react95/explorer in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 8.108s

Actual Result

➜  React95 git:(feat/gatsby-theme-v3) ✗ yarn dev:explorer 
yarn run v1.22.1
$ yarn workspace @react95/explorer develop
$ gatsby develop

 ERROR 

Unexpected key "pageData" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "nodes", "logs", "pages",
"redirects", "schema", "definitions", "staticQueryComponents", "status", "webpack", "webpackCompilationHash", "config", "lastAction", "jobsV2", "pageDataStats",
"components", "babelrc", "jobs", "nodesByType", "program", "resolvedNodesCache", "nodesTouched", "flattenedPlugins", "pendingPageDataWrites", "schemaCustomization",
"inferenceMetadata", "staticQueriesByTemplate", "queries", "visitedPages", "html", "functions", "nodeManifests". Unexpected keys will be ignored.

success open and validate gatsby-configs, load plugins - 0.175s
success onPreInit - 0.019s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.046s
success copy gatsby files - 0.064s
success Compiling Gatsby Functions - 0.506s
success onPreBootstrap - 0.525s
success createSchemaCustomization - 0.003s
success Checking for changed pages - 0.002s
success source and transform nodes - 0.040s
success building schema - 1.057s
success createPages - 0.003s
success createPagesStatefully - 0.050s
info Total nodes: 20, SitePage nodes: 1 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success update schema - 0.066s
success write out redirect data - 0.004s
success onPostBootstrap - 0.001s
info bootstrap finished - 5.740s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.158s
success write out requires - 0.012s
success run page queries - 0.607s - 1/1 1.65/s
success Caching HTML renderer compilation - 0.002s

 ERROR 

(node:2137) [DEP_WEBPACK_MAIN_TEMPLATE_OUTPUT_OPTIONS] DeprecationWarning: MainTemplate.outputOptions is deprecated (use Compilation.outputOptions instead)
(Use `node --trace-deprecation ...` to show where the warning was created)


 ERROR 

(node:2137) [DEP_WEBPACK_MAIN_TEMPLATE_REQUIRE] DeprecationWarning: MainTemplate.hooks.require is deprecated (use JavascriptModulesPlugin.getCompilationHooks().renderRequire
 instead)


 ERROR 

(node:2137) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to
NormalModule.getCompilationHooks(compilation).loader


 ERROR #98124  WEBPACK

Generating development JavaScript bundle failed

undefined

If you're trying to use a package make sure that 'undefined' is installed. If you're trying to use a local file make sure that the path is correct.


 ERROR #98124  WEBPACK

Generating development JavaScript bundle failed

undefined

If you're trying to use a package make sure that 'undefined' is installed. If you're trying to use a local file make sure that the path is correct.


 ERROR #98124  WEBPACK

Generating development JavaScript bundle failed

undefined

If you're trying to use a package make sure that 'undefined' is installed. If you're trying to use a local file make sure that the path is correct.


 ERROR #98124  WEBPACK

Generating development JavaScript bundle failed

undefined

If you're trying to use a package make sure that 'undefined' is installed. If you're trying to use a local file make sure that the path is correct.


 ERROR #98124  WEBPACK

Generating development JavaScript bundle failed

undefined

If you're trying to use a package make sure that 'undefined' is installed. If you're trying to use a local file make sure that the path is correct.


 ERROR #98124  WEBPACK

Generating development JavaScript bundle failed

undefined

If you're trying to use a package make sure that 'undefined' is installed. If you're trying to use a local file make sure that the path is correct.

failed Building development bundle - 9.023s
ERROR in commons
Module not found: TypeError: Cannot read property 'indexOf' of undefined

ERROR in commons
Module not found: TypeError: Cannot read property 'indexOf' of undefined

ERROR in commons
Module not found: TypeError: Cannot read property 'indexOf' of undefined

ERROR in polyfill
Module not found: TypeError: Cannot read property 'indexOf' of undefined

ERROR in polyfill
Module not found: TypeError: Cannot read property 'indexOf' of undefined

ERROR in polyfill
Module not found: TypeError: Cannot read property 'indexOf' of undefined

webpack compiled with 6 errors
success Writing page-data.json files to public directory - 0.061s - 1/1 16.45/s 

Environment

System:
    OS: macOS 11.5.1
    CPU: (8) x64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.4 - /var/folders/vs/z_hhlb9n3tgdng9tz9_w7bmc0000gq/T/yarn--1629934561283-0.6959975362269055/node
    Yarn: 1.22.1 - /var/folders/vs/z_hhlb9n3tgdng9tz9_w7bmc0000gq/T/yarn--1629934561283-0.6959975362269055/yarn
    npm: 6.14.14 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 92.0.4515.159
    Safari: 14.1.2

Config Flags

No response

[ggdaltoso]

tried to add resolutions to each package but it didn't work as well

packages/{explorer|gatsby-theme}/package.json

  "resolutions": {
    "graphql": "^15.4.0",
    "graphql-compose": "^7.25.0",
    "webpack": "^5.24.2"
  }

[ggdaltoso]

But it worked when adding resolutions in the on root's package.json

[ggdaltoso]

I fixed it by adjusting @react95/core, which uses storybook, to use webpack 5, adding resolutions to the root package.json file, and updating Gatsby version from v2 to v3 in @react95/explorer and @react95/gatsby-theme packages.

All changes are in this commit