Next.js Discord

Discord Forum

Multiple major react versions in a pnpm monorepo?

Answered
Southern rough shrimp posted this in #help-forum
Open in Discord
Avatar
Southern rough shrimpOP
I'd love to have one app using react19, and the other using react18. However when I try to build either of them, there's a clash of versions and my IDE doesn't like it. See screenshots

repro: https://github.com/pippinmole/pnpm-monorepo-major-reactversions/ @Rafael Almeida
Image
Answered by Rafael Almeida
this is what I get trying to build it:
> plasmo build --target=chrome-mv3

🟣 Plasmo v0.89.4
🔴 The Browser Extension Framework
🔵 INFO   | Prepare to bundle the extension...
🔵 INFO   | Building for target: chrome-mv3
🔵 INFO   | Loaded environment variables from: []
(node:87004) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
Segmentation fault (core dumped)
 ELIFECYCLE  Command failed with exit code 139.

I am not sure this is related to TS or pnpm 🤔
View full answer

12 Replies

Avatar
Southern rough shrimpOP
You can see that if I delete the web application from apps/web, and run pnpm install again, then the error is gone
Image
Avatar
Rafael Almeida
I think TS is is looking at the wrong definitions because of how pnpm handles the folders in a monorepo. try directly setting the react types path on tsconfig.compilerOptions.paths:
"react": ["./node_modules/@types/react"],
this is what I have on tsconfig and it seems to work:
{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": [
    "node_modules"
  ],
  "include": [
    ".plasmo/index.d.ts",
    "./**/*.ts",
    "./**/*.tsx"
  ],
  "compilerOptions": {
    "paths": {
      "react": ["./node_modules/@types/react"],
      "@/*": ["./src/*"]
    },
    "baseUrl": "."
  }
}
Also I remember adding this and it didn’t seem to work
I even restarted the typescript server
Avatar
Rafael Almeida
yeah I saw some errors because of forwardRef on the Input component, I restarted the ts server after adding the line
Avatar
@Rafael Almeida yeah I saw some errors because of forwardRef on the Input component, I restarted the ts server after adding the line
Avatar
Southern rough shrimpOP
Interesting, that did solve the IDE issues
But also, try running turbo run build --filter=chromeextension
Or even turbo run build
Avatar
@Southern rough shrimp But also, try running turbo run build --filter=chromeextension
Avatar
Rafael Almeida
this is what I get trying to build it:
> plasmo build --target=chrome-mv3

🟣 Plasmo v0.89.4
🔴 The Browser Extension Framework
🔵 INFO   | Prepare to bundle the extension...
🔵 INFO   | Building for target: chrome-mv3
🔵 INFO   | Loaded environment variables from: []
(node:87004) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
Segmentation fault (core dumped)
 ELIFECYCLE  Command failed with exit code 139.

I am not sure this is related to TS or pnpm 🤔
Answer
Avatar
Southern rough shrimpOP
Closing as the issue has magically disappeared.