gpt4 book ai didi

webpack - monorepo 中的 create-react-app + gatsby 包不会同时运行

转载 作者:行者123 更新时间:2023-12-04 12:02:03 27 4
gpt4 key购买 nike

我正在尝试使用这些包创建一个 monorepo:

  • 使用 create-react-app 创建的 Web 应用程序
  • Gatsby 网站
  • Web 应用程序和 gatsby 应用程序将共享的组件库等(这是我使用 monorepo 的主要原因)。

  • 到目前为止,我一直无法设置它以便 react 应用程序和 gatsby 站点都可以运行。
    为了显示问题,我设置了一个 minimal monorepo ,只有这些包:
  • 克拉 使用 create-react-app 创建
  • 盖特创建于 gatsby new gat https://github.com/gatsbyjs/gatsby-starter-default

  • 在初始设置(没有 nohoisting)之后,启动 gatsby 站点返回以下内容:
     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.
    然后我尝试从每个包中 nohoisting 所有内容,将以下内容添加到每个包的 package.json 中:
      "workspaces": {
    "nohoist": [
    "**"
    ]
    },
    ...然后在顶层做 lerna cleanlerna bootstrap .
    此时, gatsby 站点失败并出现不同的错误:
    $ 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 运行。
    我偶然发现,如果我使用 yarn add 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.
    所以在我看来 gatsby 和 react-scripts 在某种程度上混淆了他们所需的 webpack 版本..?我本以为 nohoisting 一切应该意味着每个包都将完全独立运行,即好像它们是单独的“正常”(即不是单)存储库 - 但情况似乎并非如此..?
    我一般是 webpack 和 monorepos 的菜鸟,所以可能我误解了一些东西......?非常感谢任何见解!
    一些版本:
    yarn           1.22.10
    lerna 4.0.0
    gatsby 3.5.0
    react-scripts 4.0.3
    react 17.0.2

    最佳答案

    您可以尝试将 gatsby 降级到 2.x(因为它使用 Webpack 4)和/或
    尝试添加

    "workspaces": {
    "nohoist": [
    "gatsby"
    ]
    }
    到 gatsby 项目的 package.json。

    关于webpack - monorepo 中的 create-react-app + gatsby 包不会同时运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67558504/

    27 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com