Webpack 创建react应用程序&x2B；monorepo的盖茨比包装赢得'；我俩都跑不了

我正在尝试使用以下软件包创建monorepo：

• 使用create react app创建的web应用
• 盖茨比遗址
• web应用程序和gatsby应用程序将共享的组件库等（这是我使用monorepo的主要原因）

到目前为止，我无法设置react应用程序和盖茨比网站都可以运行。

为了显示问题，我设置了一个，仅使用以下软件包：

• cra使用create react应用程序创建
• gat用新gat创建的

  GATSBhttps://github.com/gatsbyjs/gatsby-starter-default

初始设置（无吊装）后，启动盖茨比现场返回以下信息：

 ERROR

Error in "/Users/angus/coding/monorepo-trials/cra-gatsby-monorepo/node_modules/gatsby-plugin-gatsby-cloud/gatsby-node.js": Cannot read property 'RawSource' of undefined



  TypeError: Cannot read property 'RawSource' of undefined
  
  - WebpackAssetsManifest.js:17 Object.<anonymous>
    [cra-gatsby-monorepo]/[webpack-assets-manifest]/src/WebpackAssetsManifest.js:17:47
  
  - v8-compile-cache.js:192 Module._compile
    [cra-gatsby-monorepo]/[v8-compile-cache]/v8-compile-cache.js:192:30
  
  - loader.js:1092 Object.Module._extensions..js
    internal/modules/cjs/loader.js:1092:10
  
  - loader.js:928 Module.load
    internal/modules/cjs/loader.js:928:32
  
  - loader.js:769 Function.Module._load
    internal/modules/cjs/loader.js:769:14
  
  - loader.js:952 Module.require
    internal/modules/cjs/loader.js:952:19
  
  - v8-compile-cache.js:159 require
    [cra-gatsby-monorepo]/[v8-compile-cache]/v8-compile-cache.js:159:20
  
  - gatsby-node.js:5 Object.<anonymous>
    [cra-gatsby-monorepo]/[gatsby-plugin-gatsby-cloud]/gatsby-node.js:5:53
  
  - v8-compile-cache.js:192 Module._compile
    [cra-gatsby-monorepo]/[v8-compile-cache]/v8-compile-cache.js:192:30
  
  - loader.js:1092 Object.Module._extensions..js
    internal/modules/cjs/loader.js:1092:10
  
  - loader.js:928 Module.load
    internal/modules/cjs/loader.js:928:32
  
  - loader.js:769 Function.Module._load
    internal/modules/cjs/loader.js:769:14
  
  - loader.js:952 Module.require
    internal/modules/cjs/loader.js:952:19
  
  - v8-compile-cache.js:159 require
    [cra-gatsby-monorepo]/[v8-compile-cache]/v8-compile-cache.js:159:20
  
  - resolve-module-exports.ts:197 resolveModuleExports
    [cra-gatsby-monorepo]/[gatsby]/src/bootstrap/resolve-module-exports.ts:197:26
  
  - validate.ts:349 
    [cra-gatsby-monorepo]/[gatsby]/src/bootstrap/load-plugins/validate.ts:349:31
  

not finished load plugins - 0.930s

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! gatsby-starter-default@0.1.0 develop: `gatsby develop` npm ERR! Exit status 1 npm ERR!  npm ERR! Failed at the gatsby-starter-default@0.1.0 develop script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!     /Users/angus/.npm/_logs/2021-05-16T14_05_14_891Z-debug.log error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

…然后在顶层执行

lerna clean

和

lerna bootstrap

在这一点上，盖茨比网站出现了不同的错误：

$ yarn start
yarn run v1.22.10
$ yarn develop
$ gatsby develop
success open and validate gatsby-configs - 0.081s
success load plugins - 0.912s
success onPreInit - 0.041s
success initialize cache - 0.008s
success copy gatsby files - 0.135s
success onPreBootstrap - 0.020s
success createSchemaCustomization - 0.006s
success Checking for changed pages - 0.004s
success source and transform nodes - 0.073s
success building schema - 0.571s
success createPages - 0.001s
success createPagesStatefully - 0.089s
info Total nodes: 43, SitePage nodes: 6 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success update schema - 0.080s
success write out redirect data - 0.002s
success Build manifest and related icons - 0.073s
success onPostBootstrap - 0.079s
info bootstrap finished - 5.402s
success onPreExtractQueries - 0.001s
success extract queries from components - 1.843s
success write out requires - 0.007s
success run page queries - 0.019s - 1/1 53.60/s

 ERROR 

(node:9884) [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:9884) [DEP_WEBPACK_MAIN_TEMPLATE_REQUIRE] DeprecationWarning: MainTemplate.hooks.require is deprecated (use
JavascriptModulesPlugin.getCompilationHooks().renderRequire instead)


 ERROR 

(node:9884) [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 - 3.780s
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

…尽管cra在运行

我偶然发现，如果我随后使用

纱线添加gatsby-W

在monorepo的顶层额外安装gatsby，那么gatsby站点将运行，但cra包失败如下：

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-loader": "8.1.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:

  /Users/angus/coding/monorepo-trials/cra-gatsby-monorepo/node_modules/babel-loader (version: 8.2.2) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/angus/coding/monorepo-trials/cra-gatsby-monorepo/node_modules/babel-loader is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls babel-loader in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

所以在我看来，盖茨比和react脚本在某种程度上混淆了他们所需的webpack版本。。？我会认为，所有的一切都应该意味着每个包都将完全独立运行，即，就好像它们是单独的“正常”（即，不是单一）回购一样——但情况似乎并非如此

一般来说，我是webpack和monorepos的noob，所以我可能误解了什么。。。？非常感谢您的任何见解

一些版本：

yarn           1.22.10
lerna          4.0.0
gatsby         3.5.0
react-scripts  4.0.3
react          17.0.2

yarn           1.22.10
lerna          4.0.0
gatsby         3.5.0
react-scripts  4.0.3
react          17.0.2