I want to install two different versions of Vue.js in my project and I came to a dead end regarding multiple node_modules directories.
The problem is that up until now I used npm and single package.json in the root of the dir. This way everything works fine.
Now I have main package.json at the root of the dir:
{
"workspaces": {
"packages": [
"frontend/v2",
"frontend/v3"
]
},
"packageManager": "yarn@4.1.0",
}
And two package.json files in each of the directories. So for example the frontend/v2/package.json looks like this:
{
"name": "v2",
"devDependencies": {
"@intlify/vue-i18n-loader": "^3.2.0",
"@johmun/vue-tags-input": "^2.1.0",
"@symfony/webpack-encore": "^1.6.1",
"@types/jquery": "^3.5.7",
"@types/pikaday": "^1.7.4",
"@types/select2": "^4.0.53",
"@types/uuid": "^9.0.1",
"@types/vue-select": "^2.5.1",
"@types/vue2-datepicker": "^3.3.0",
"@types/vue2-editor": "^2.6.1",
"@types/webpack-env": "^1.16.3",
"@voerro/vue-tagsinput": "^2.4.3",
"autoprefixer": "^10.4.19",
"axios": "^0.21.1",
"blob-util": "^2.0.2",
"chart.js": "^2.9.3",
"chokidar": "^3.5.1",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"core-js": "^3.18.3",
"css-loader": "^6.4.0",
"date-fns": "^3.6.0",
"dotenv-flow": "^3.2.0",
"file-loader": "^6.2.0",
"html2pdf.js": "^0.9.3",
"jquery": "^3.5.1",
"libphonenumber-js": "^1.11.4",
"moment": "^2.29.4",
"pikaday": "^1.8.2",
"postcss": "^8.4.38",
"postcss-loader": "^6.2.1",
"prettier": "^2.8.3",
"prettier-plugin-tailwindcss": "^0.2.5",
"pretty-bytes": "^6.1.1",
"primeicons": "^6.0.0",
"primevue": "^2.10.4",
"regenerator-runtime": "^0.13.7",
"remixicon": "^2.5.0",
"sass": "^1.69.3",
"sass-loader": "^12.2.0",
"select2": "^4.0.13",
"semver": "^7.3.5",
"sweetalert2": "^11.1.9",
"tailwind-merge": "^2.3.0",
"tailwindcss": "^3.4.4",
"ts-loader": "^9.2.6",
"tslib": "^2.3.1",
"typescript": "^3.9.7",
"uuid": "^3.4.0",
"v-tooltip": "^2.0.3",
"vee-validate": "^3.4.15",
"vue": "^2.6.14",
"vue-chartjs": "^3.5.1",
"vue-class-component": "^7.2.6",
"vue-country-flag": "^2.3.2",
"vue-final-modal": "^0.21.3",
"vue-html2pdf": "^1.8.0",
"vue-i18n": "^8.28.2",
"vue-loader": "^15.9.6",
"vue-moment": "^4.1.0",
"vue-multiselect": "^2.1.6",
"vue-notification": "^1.3.20",
"vue-pikaday-directive": "^0.6.1",
"vue-property-decorator": "^8.4.1",
"vue-recaptcha-v3": "^1.9.0",
"vue-router": "^3.6.5",
"vue-select": "^3.15.0",
"vue-slick-carousel": "^1.0.6",
"vue-spinner": "^1.0.4",
"vue-svg-inline-plugin": "^2.2.3",
"vue-template-compiler": "^2.6.14",
"vue2-datepicker": "^3.8.2",
"vue2-editor": "^2.10.3",
"vuex": "^3.6.2",
"webpack-notifier": "^1.14.1",
"yaml-loader": "^0.6.0"
}
}
The problem is this package:
"name": "@types/express-serve-static-core",
"version": "5.0.0",
Somehow it gets version 5 installed and it is not compatible with my typescript version which leads to build fail because of syntax errors. If you run this package.json using npm without any workspace - express-serve-static-core gets older version installed and everything works fine. This wrong version applies only if I use workspaces.
It breaks on yarn as well either way with or without using yarn workspace.
I tried to run only single workspace as well - same problem. Maybe I should lock the package versions somehow?
Got it, the problem was in my current lock file. If I generate a new one - it breaks the versions of the mentioned packages. Will have to fix the packages first.