Can't resolve 'react-dom/client' after setup new environment?

afasyah commented 2 weeks ago

Before the problem occured, I've been using the default teambit.react/react for my environment. In short, I need it to modify my unit test configuration file.

So I created a new environment specifically for React v17 to be used for all of the components in my org scope just as I've been instructed by the docs.

console error

I've been stuck here so far. I have tried to delete the cache, node_modules as well as the pnpm-lock.yaml and reinstall--recompile everything but the problem still persists. Unit test is fine--all green, every component have passed the test.

this is my installed dependencies, in case something is related to the package I've installed

"dependencies": {
        "@nivo/line": "0.78.0",
        "@nivo/pie": "^0.78.0",
        "@nivo/scales": "^0.87.0",
        "@nivo/tooltip": "0.78.0",
        "@nivo/voronoi": "^0.87.0",
        "@teambit/defender.eslint-linter": "^1.0.39",
        "@teambit/defender.jest-tester": "^2.0.14",
        "@teambit/defender.prettier-formatter": "^1.0.19",
        "@teambit/dependencies.modules.packages-excluder": "^1.0.8",
        "@teambit/preview.react-preview": "^1.0.53",
        "@teambit/react.mounter": "^1.0.18",
        "@teambit/react.react-env": "^1.0.97",
        "@teambit/typescript.typescript-compiler": "^2.0.44",
        "@testing-library/react": "12.1.2",
        "d3-shape": "^3.2.0",
        "date-fns": "2.28.0",
        "lodash": "4.17.21",
        "prop-types": "15.7.2",
        "rc-slider": "9.7.4",
        "react-data-table-component": "7.5.4",
        "react-datepicker": "4.7.0",
        "react-infinite-scroll-component": "6.1.0",
        "react-popper": "2.2.5",
        "react-select": "5.8.0",
        "react-tooltip": "4.2.17",
        "styled-components": "5.3.3"
},
"peerDependencies": {
        "@nivo/core": "0.78.0",
        "@popperjs/core": "2.11.2",
        "@types/react": "17.0.2",
        "@types/react-dom": "17.0.2",
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "react-is": "17.0.2"
}

GiladShoham commented 2 weeks ago

What is your base env? You should probably be using one of those if you want react v17 https://bit.cloud/teambit/react/v17/react-env-cjs (if you want cjs) or https://bit.cloud/teambit/react/v17/react-env (if you want esm)

afasyah commented 2 weeks ago

ESM, I've been using the specified command for Bit Environment React 17.

But I think I found the culprit

show env

Shouldn't env.jsonc specified the default React version to be 17 as a default when generated? it's just specified 18 here out of the blue...

GiladShoham commented 2 weeks ago

the default react-env template uses react 18 Indeed if you want 17 you have to change it manually. I need to check if we have custom react 17 env template

afasyah commented 2 weeks ago

also still noticed the issue of harmony workspace needs to be installed twice too as already mentioned by this issue. Using latest bit 1.8.20 as of rn @GiladShoham.

I finally got it working after modified the env file from the template. I'll attach the step just in case someone here got the same issue using older version react (<v.18).

changing peers entry in env.jsonc to desired React version (use version 12.* for the @testing-library/react for React 17 support) (I didn't notice that it has to be done, since I thought using the specified command for React 17 will be unnecessary)
Make sure to use @teambit/react.v17.mounter instead of @teambit/react.mounter on the workspace.jsonc dependency
also I did notice the env template for react 17 needed the docs-template? Without it, it will crash since the env will looking for it. So make sure to add @teambit/react.v17.docs-template to the workspace dependency too and add docs.tsx from the env template.

 preview(): EnvHandler<Preview> {
   /**
    * @see https://bit.dev/docs/react-env/component-previews
    */
   return ReactPreview.from({
     mounter: this.previewMounter,
     docsTemplate: this.previewDocs,
     hostDependencies,
     // transformers: [webpackTransformer],
   });
 }

...and after that, re-install again (twice?)

that's it, although I really hope the react env template would be generated accordingly to the version I choose without having to be meddled with another workaround.

cheers.

GiladShoham commented 1 week ago

Thanks for the feedback. Will make sure to add a proper docs for it. @giteden . About the duplicate install I'm working on it and it should be fine with the latest nightly already. Also we are now making the envs template much more simple and also support soon env.jsonc extends feature which will make almost all the steps you have mentioned unnecessary. After the changes you will probably only have to change the import on your env file to the react 17 one. And the extends field in the env.jsonc file. I'm start working on the extends feature tomorrow so hope it will be available soon. Then we will update the templates accordingly. Thanks again for taking the effort to document everything here for other people.

teambit / bit

Can't resolve 'react-dom/client' after setup new environment? #9157