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

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"
}