How to use two different react version in Turborepo?

[kuji2336]

Hello, I have two application in my apps folder, app-x which uses "react": "17.0.2" version and second app app-y which uses react "react": "17.0.2" version, also I have separated ui package component which uses react 17.0.2 as dev dependency, after running my App I encountered some kind of react version conflict, I tried to set up resolutions in root package.json folder and then all the errors disappeared, but after running app-x again it seemed it was using react: 18.0.2 version, after digging in internet I couldn't find a proper solution for this case, How I can use two different react/react-dom versions in Monorepo without causing a mess in my application? simpy i want to my app-x use "react": "17.0.2" version and my app-y use react: 18.0.2 version. any hint will be appreciated.

    "@types/react": "<17.0.9",
    "@types/react-dom": "<17.0.6",
    "react": "17.0.2 || 18.2.0",
    "react-dom": "17.0.2 || 18.2.0"
  },
  "overrides": {
    "app-x": {
        "react": "17.0.2",
        "react-dom": "17.0.2"
    },
    "app-y": {
        "react": "18.0.2",
        "react-dom": "18.2.0"
    }
  },  

[mehulkar]

I'm not sure this is something turborepo really helps manage. Here's a proof of concept that a monorepo (that uses turbo to build apps) can have two different versiosn of react: https://github.com/mehulkar/its-a-double-react. I hope that helps!

[prawito]

In your case, you manually create the react project. So, it's looks works in your case
But, Can you try to do these steps?:

1. Create monorepo using npx create-turbo@latest
2. In apps/ create new project like npx create-docusaurus@latest my-website classic --typescript
   In my case I saw that docusaurus using react 17, but next js on apps/docs using react 18
   It always failed.
   Can you help on that case?

[rickvian]

it doesnt seems to have typescript, i gave up merging 2 project with different react version to monorepo, the typecheck was quite messy i don't find any answer to isolate each project's type check

[joaopcm]

any news here, guys?

[marianocodes]

The solution selected didn't work for me.

In my case I had to use nohoist property with yarn in the root package.json to map the libraries that should be isolated and installed in each app scope.

For example I had to run a Nuxt2 and Nuxt3 apps, I was having troubles cause what ever package got installed last it was overwriting the other.

This worked for me

"workspaces": {
    "packages": [
      "apps/*",
      "packages/*"
    ],
    "nohoist": [
      "**/vue",                    
      "**/vue/**",                 
      "**/vue-server-renderer",    
      "**/vue-server-renderer/**", 
      "**/vue-template-compiler",  
      "**/vue-template-compiler/**",
      "**/nuxt",                   
      "**/nuxt/**",
      "**/webpack",
      "**/webpack/**",
      "**/vite",
      "**/vite/**",
      "**/@nuxtjs",
      "**/@nuxtjs/**",
      "**/@nuxt",
      "**/@nuxt/**"
    ]
  }```

You have to make sure that any library discrepancy has to be listed there to avoid conflicts. 

As last resource I realized that if you put this in the children package.json files also fixes the problem but then you're not getting part of the benefits of a monorepo avoiding lib dups in the nodemodules

```"workspaces": {
  "nohoist": ["**"]
}```

PD: The example of react17/18 might be working because the `react17` app is actually running `react18`.