Yarn 3.5 (stable) using ViteJS - I keep getting this same error for various third party packages. I'm lost on how to properly solve this. The message says I can mark "react" as external, 1) no docs on how to do that, and 2) that would remove it from the bundle which is definitely not a valid solution since my app runs on react.
How do I solve this?
yarn dev - start start development
yarn created .yarn folder, .pnp.cjs, yarn.lock, and .pnpn.loader.mjs files in the root of my repo that it maintains. I don't really have any control over how those things are generated/maintained.
package.json:
...
"packageManager": "yarn@3.5.0",
"type": "module",
"scripts": {
"dev": "vite --config vite.config.ts",
"build": "tsc && vite build",
"preview": "vite preview --config vite.config.ts"
},
"dependencies": {
"@apollo/client": "^3.7.10",
"chroma-js": "^2.4.2",
"graphql": "^16.6.0",
"graphql-ws": "^5.12.0",
"howler": "^2.2.3",
"linq": "^4.0.1",
"lodash.clonedeep": "^4.5.0",
"luxon": "^3.3.0",
"primeflex": "^3.3.0",
"primeicons": "^6.0.1",
"primereact": "^9.2.1",
"quill": "^1.3.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.9.0",
"react-use": "^17.4.0",
"recoil": "^0.7.7",
"recoil-sync": "^0.2.0",
"uuid": "^9.0.0"
},
"devDependencies": {
"@types/chroma-js": "^2",
"@types/howler": "^2",
"@types/jest": "^29.5.0",
"@types/linq": "^2.2.33",
"@types/lodash.clonedeep": "^4",
"@types/luxon": "^3.2.0",
"@types/node": "^18.15.11",
"@types/quill": "^2.0.10",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/uuid": "^9.0.1",
"@vitejs/plugin-react-swc": "^3.0.0",
"@yarnpkg/sdks": "^3.0.0-rc.40",
"autoprefixer": "^10.4.14",
"concurrently": "^7.6.0",
"cross-env": "^7.0.3",
"graphql-config": "^4.5.0",
"graphql-tag": "^2.12.6",
"jest": "^29.5.0",
"postcss": "^8.4.21",
"prettier": "2.8.6",
"sass": "^1.60.0",
"typescript": "^5.0.2",
"vite": "^4.2.0"
}
.yarnrc.yml:
nodeLinker: pnp
plugins:
- path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
spec: "@yarnpkg/plugin-typescript"
yarnPath: .yarn/releases/yarn-3.5.0.cjs
yarn dev output:
Error: Build failed with 1 error:
../../../.yarn/__virtual__/recoil-sync-virtual-1d8ed1cd8b/0/cache/recoil-sync-npm-0.2.0-8a627829eb-a0bd98acbc.zip/node_modules/recoil-sync/es/index.js:2:18: ERROR: Could not resolve "react"
at failureErrorWithLog (F:\git\aperture\.yarn\unplugged\esbuild-npm-0.17.13-538abc913d\node_modules\esbuild\lib\main.js:1636:15)
at F:\git\aperture\.yarn\unplugged\esbuild-npm-0.17.13-538abc913d\node_modules\esbuild\lib\main.js:1048:25
at runOnEndCallbacks (F:\git\aperture\.yarn\unplugged\esbuild-npm-0.17.13-538abc913d\node_modules\esbuild\lib\main.js:1471:45)
at buildResponseToResult (F:\git\aperture\.yarn\unplugged\esbuild-npm-0.17.13-538abc913d\node_modules\esbuild\lib\main.js:1046:7)
at F:\git\aperture\.yarn\unplugged\esbuild-npm-0.17.13-538abc913d\node_modules\esbuild\lib\main.js:1058:9
at new Promise (<anonymous>)
at requestCallbacks.on-end (F:\git\aperture\.yarn\unplugged\esbuild-npm-0.17.13-538abc913d\node_modules\esbuild\lib\main.js:1057:54)
at handleRequest (F:\git\aperture\.yarn\unplugged\esbuild-npm-0.17.13-538abc913d\node_modules\esbuild\lib\main.js:723:19)
at handleIncomingPacket (F:\git\aperture\.yarn\unplugged\esbuild-npm-0.17.13-538abc913d\node_modules\esbuild\lib\main.js:745:7)
at Socket.readFromStdout (F:\git\aperture\.yarn\unplugged\esbuild-npm-0.17.13-538abc913d\node_modules\esbuild\lib\main.js:673:7) {
errors: [
{
detail: undefined,
id: '',
location: {
column: 18,
file: '../../../.yarn/__virtual__/recoil-sync-virtual-1d8ed1cd8b/0/cache/recoil-sync-npm-0.2.0-8a627829eb-a0bd98acbc.zip/node_modules/recoil-sync/es/index.js',
length: 7,
line: 2,
lineText: "import react from 'react';",
namespace: '',
suggestion: ''
},
notes: [
{
location: {
column: 33,
file: '../../../.pnp.cjs',
length: 504,
line: 10028,
lineText: ' "packageDependencies": [\\',
namespace: '',
suggestion: ''
},
text: `The Yarn Plug'n'Play manifest forbids importing "react" here because it's not listed as a dependency of this package:`
},
{
location: null,
text: 'You can mark the path "react" as external to exclude it from the bundle, which will remove this error.'
}
],
pluginName: '',
text: 'Could not resolve "react"'
}
],
warnings: []
}
Finally found an answer. Unclear if this is the correct approach.
pnpMode in the .yarnrc.yml file to looseyarn installyarn dev should now run successfully without complaining..yarnrc.yml:
nodeLinker: pnp
pnpMode: "loose"
plugins:
- path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
spec: "@yarnpkg/plugin-typescript"
yarnPath: .yarn/releases/yarn-3.5.0.cjs