如何使用[bitdev]与react 18一起运行`位标记‘由于反应测试库失败

Question

我试图将bit.dev用于前端微服务，并且在使用react 18运行bit tag时遇到了一个问题，我得到了这个错误。

The following errors were found while running the build pipeline
Failed task 1: "teambit.defender/tester:TestComponents" of env "teambit.react/react"
component: cagosto48.select-boxes/ui/wizard-select@0.0.1
Error: Cannot find module 'react-dom/client' from 'node_modules/.pnpm/registry.npmjs.org+@testing-library+react@13.3.0_sfoxds7t5ydpegc3knd667wn6m/node_modules/@testing-library/react/dist/pure.js'

Require stack:
  node_modules/.pnpm/registry.npmjs.org+@testing-library+react@13.3.0_sfoxds7t5ydpegc3knd667wn6m/node_modules/@testing-library/react/dist/pure.js
  node_modules/.pnpm/registry.npmjs.org+@testing-library+react@13.3.0_sfoxds7t5ydpegc3knd667wn6m/node_modules/@testing-library/react/dist/index.js
  cagosto48.select-boxes_ui_wizard-select@0.0.1/dist/wizard-select.spec.js


Found 1 errors in 1 components

Failed task 2: "teambit.preview/preview:GeneratePreview" of env "teambit.react/react"
component: cagosto48.select-boxes/ui/wizard-select@0.0.1
ModuleNotFoundError: Module not found: Error: Can't resolve '@emotion/react' in '/Users/carlosagosto/Library/Caches/Bit/capsules/b89c12b2cff6d117ea54ad5513a8d8d3d0194e16/node_modules/.pnpm/registry.npmjs.org+@mui+styled-engine@5.10.3_react@17.0.2/node_modules/@mui/styled-engine'
ModuleNotFoundError: Module not found: Error: Can't resolve '@emotion/react' in '/Users/carlosagosto/Library/Caches/Bit/capsules/b89c12b2cff6d117ea54ad5513a8d8d3d0194e16/node_modules/.pnpm/registry.npmjs.org+@mui+styled-engine@5.10.3_react@17.0.2/node_modules/@mui/styled-engine'
    at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/Compilation.js:1773:28
    at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:811:13
    at eval (eval at create (/Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:286:22
    at eval (eval at create (/Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:442:22
    at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:124:11
    at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:673:25
    at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:882:8
    at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:1002:5
    at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/neo-async/async.js:6883:13
    at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/lib/NormalModuleFactory.js:985:45
    at finishWithoutResolve (/Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:312:11)
    at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:386:15
    at /Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/Users/carlosagosto/.bvm/versions/0.0.832/bit-0.0.832/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)

Found 1 errors in 1 components


✖ Total 7 tasks. 5 succeeded. 2 failed. 0 skipped. Total errors: 2.

我已经看过这个react 18 https://bit.cloud/bit-foundations/react/react-version-envs/react-18-env的文档，但是仍然有这个问题，我更新了我的workspace.jsonc文件如下。

/**
 * this is the main configuration file of your bit workspace.
 * for full documentation, please see: https://bit.dev/docs/workspace/workspace-configuration
 **/ {
  "$schema": "https://static.bit.dev/teambit/schemas/schema.json",
  /**
   * main configuration of the Bit workspace.
   **/
  "teambit.workspace/workspace": {
    /**
     * the name of the component workspace. used for development purposes.
     **/
    "name": "my-workspace-name",
    /**
     * set the icon to be shown on the Bit server.
     **/
    "icon": "https://static.bit.dev/bit-logo.svg",
    /**
     * default directory to place a component during `bit import` and `bit create`.
     * the following placeholders are available:
     * name - component name includes namespace, e.g. 'ui/button'.
     * scopeId - full scope-id includes the owner, e.g. 'teambit.compilation'.
     * scope - scope name only, e.g. 'compilation'.
     * owner - owner name in bit.dev, e.g. 'teambit'.
     **/
    "defaultDirectory": "{scope}/{name}",
    /**
     * default scope for all components in workspace.
     **/
    "defaultScope": "my-scope"
  },
  /**
   * main configuration for component dependency resolution.
   **/
  "teambit.dependencies/dependency-resolver": {
    /**
     * choose the package manager for Bit to use. you can choose between 'yarn', 'pnpm'
     */
    "packageManager": "teambit.dependencies/pnpm",
    "policy": {
      "dependencies": {
        "@bit-foundations/react.react-version-envs.react-18-env": "0.0.3",
        "@emotion/react": "^11.10.0",
        "@emotion/styled": "^11.10.0",
        "@mui/material": "^5.10.2"
      },
      "peerDependencies": {
        "@testing-library/react": "^13.3.0",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react-hooks": "^8.0.1",
        "@testing-library/user-event": "^14.4.3",
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
      }
    },
    "linkCoreAspects": true
  },
  /**
   * workspace variants allow to set different subsets of configuration for components in your
   * workspace. this is extremely useful for upgrading, aligning and building components with a new
   * set of dependencies. a rule can be a directory or a component-id/namespace, in which case,
   * wrap the rule with curly brackets (e.g. `"{ui/*}": {}`)
   * see https://bit.dev/docs/workspace/variants for more info.
   **/
  "teambit.workspace/variants": {
    "{ui/**}, {pages/**}": {
      "bit-foundations.react/react-version-envs/react-18-env@0.0.3": {
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
      }
    },
    /**
     * "*" is a special rule which applied on all components in the workspace.
     **/
    "*": {
      /**
       * uncomment to apply the chosen environment on all components.
       **/
      // "teambit.react/react": { }
    }
  }
}

Answer 1

我已经将您的workspace.jsonc复制到了一个新的react环境中，并且在标记一个新组件时没有任何问题。更新bit可能会有所帮助。

截至2022年8月30日，最新版本为0.0.833

bvm upgrade

升级后，请确保删除pnpm-lock.yaml、node_modules和胶囊。让我们开始从零开始旋转一切。

rm -rf node_modules pnpm.lock-yaml

还有太空舱：

bit capsule delete

现在，重新安装和编译(两次)：

bit install && bit compile && bit install && bit compile

检查bit status是否干净：

bit status
# fix any potential issue

也许能解决这个问题。

否则，您的问题来自@emotion/react请求react 17，而这并不在您的node_modules中。您可以尝试降低peerDependencies在policy中的级别

"peerDependencies":{
    "react": "^17.0.2"
}