How to use [bitdev] with react 18 running `bit tag` fails due to react testing library - reactjs

Question

I am trying to use bit.dev for a front-end micro service and I am running into an issue when running bit tag with react 18 I get this error
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.
I have look at this the docs for react 18 https://bit.cloud/bit-foundations/react/react-version-envs/react-18-env but still having this issue I updated my workspace.jsonc file to be this.
/**
* 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

I have copied your workspace.jsonc to a new react environment and didn't have any trouble tagging a new component. Maybe updating bit will help.
As August 30th, 2022, the latest version is 0.0.833
bvm upgrade
Afterwards upgrading, make sure you delete pnpm-lock.yaml, node_modules and the capsule. Let's start to spin everything from zero.
rm -rf node_modules pnpm.lock-yaml
And also the capsule:
bit capsule delete
Now, re install and compile (twice):
bit install && bit compile && bit install && bit compile
Check that bit status is clean:
bit status
# fix any potential issue
That might solve it.
Otherwise, your problem comes from #emotion/react requesting react 17 which is not in your node_modules. You can try downgrading the peerDependencies in your policy:
"peerDependencies":{
"react": "^17.0.2"
}