'useid' was not found or 'react.useid' is not a function

[benjgil]

I'm getting an error when running the component Previews (compositions and main docs page) on bit start and on the remote scope.

This is almost certainly an issue between react17 and 18 ('useid' is a react18 function), but I have done the advised configuration to upgrade to react18:

• set react and react-dom 18 in my workspace peerDependencies. And @types/react + @types/react-dom version 18 in dependencies.
• created a custom env in which I've configured the getDependencies to set the above react18 dependencies for components using that env
• assigned by react18 env to my components
• deleted node_modules, lock file, run bit cc and re-installed.
• run bit show on the relevant components and the configured react18 packages are showing up as expected

However I'm still seeing the error as in the title of this issue. What's going on?

EDIT: I'll add that this doesn't happen for all react18 components, only some. It seems to be limited to components using specific components from libraries i'm using.

[benjgil]

This is because while the component is configured for react18, your env itself is still configured with react17 as its own dependency - the teambit.envs/env environment is currently configured still for react17.

Run bit show <env_component> to verify that this is the case in the dependencies section of the printout.

Solution
So, to update your env fully to be react18-compatible you need to manually update its own dependencies. The best way to currently do that is by adding a variant in the workspace.jsonc file of your react18 custom env's workspace, like so:

// inside the variants section
"react/react-version-envs/react-18-env": { // replace with the relevant selector for your env component 
      "teambit.dependencies/dependency-resolver": {
        "policy": {
          "dependencies": {
            "react": "^18.2.0",
            "react-dom": "^18.2.0"
          },
          "devDependencies": {
            "@types/react": "^18.0.17",
            "@types/react-dom": "^18.0.6"
          }
        }
      }
    }

Once this is configured, run bit show again to verify that the versions have now been updated to react18 and if that is the case then re-tag your env and export.

Now use this new version of your react18 env and you'll see that both the local dev server and the remote scope (after tag+export of your component with the new env) now render as required.

Note
Don't worry about any errors regarding reactDOM.render not being supported - this is only related to bit's own UI rendering, and will be updated asap.

EDIT (based on the edit in the question):
If you only see this happen on some components, it's because most react18-enabled libraries still don't use many of the new react18 APIs, so you will only see this for components that use one of those APIs - such as the useId function - either directly or through a dependency.

[rishabh-ti]

Does that mean bit is not fully compatible with React v18 components? How much more time till we can see an update from bit regarding this?