由于react测试库的原因,如何将[bitdev]与运行"位标记"的react 18一起使用失败



我正试图将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但是仍然存在这个问题,我将我的CCD_ 2文件更新为这个。

/**
* 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": { }
}
}
}

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

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

bvm upgrade

升级后,请确保删除pnpm-lock.yaml、node_modules和capsule。让我们从零开始旋转。

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中。您可以尝试在policy:中降级peerDependencies

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

最新更新