We just started to use monorepo and yarn workspaces for two of our main projects. One is originally built on Angular 11 and another is in React.
We set up yarn workspaces, and on one project (Angular) everything works perfectly fine.
The react side though pick up the wrong babel-loader.
Here is the current folder structure:
root
|--package.json
|--node_modules
| |--"babel-loader": "8.1.0"
|--hub
| |--package.json
| |--node_modules
| |-- <no babel-loader here>
|--platform
| |--package.json
| |--node_modules
| |--"babel-loader": "8.2.3"
...
root package.json:
{
"private": true,
"workspaces": [
"platform",
"hub",
"shared"
]
}
hub package.json
{
"name": "hub",
"version": "0.1.0",
"license": "MIT",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest --maxConcurrency=2 --maxWorkers=2",
"eslint": "eslint 'src/app/**/*.{js,jsx,ts,tsx}'",
"eslint:fix": "eslint --fix 'src/app/**/*.{js,jsx,ts,tsx}'",
"lint": "yarn run eslint",
"tsc": "tsc --skipLibCheck --noEmit",
"fmt": "prettier --write --config ./.prettierrc.yml '*.{js,yml}' 'src/app/**/*.{js,ts,tsx,scss,component.html}'",
"fmt:check": "prettier --config ./.prettierrc.yml --check '*.{js,yml}' 'src/app/**/*.{js,ts,tsx,scss,component.html}'",
"check": "yarn run fmt:check && yarn run tsc && yarn run lint",
"pre-commit": "yarn run fmt && yarn run check && yarn run test",
"storybook": "start-storybook -s public -p 6006"
},
"dependencies": {
"@date-io/date-fns": "1.3.13",
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"i18next": "^20.2.1",
"lodash": "^4.17.15",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.8.13",
"react-redux": "7.2.2",
"react-scripts": "4.0.3"
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@storybook/addon-actions": "^6.1.11",
"@storybook/addon-controls": "^6.1.11",
"@storybook/addon-essentials": "^6.1.11",
"@storybook/addon-links": "^6.1.11",
"@storybook/react": "^6.1.11",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@typescript-eslint/eslint-plugin": "^4.26.1",
"@typescript-eslint/parser": "^4.26.1",
"babel-loader": "8.1.0",
"eslint": "^7.28.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.7.2",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jest": "^24.3.6",
"eslint-plugin-jest-dom": "^3.9.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-testing-library": "^4.6.0",
"identity-obj-proxy": "^3.0.0",
"jest": "26.6.0",
"jest-svg-transformer": "^1.0.0",
"msw": "^0.35.0",
"msw-storybook-addon": "^1.3.0",
"prettier": "^2.3.1",
"react-test-renderer": "^17.0.2",
"redux-mock-store": "^1.5.4",
"ts-jest": "^26.5.6",
"typescript": "^4.3.5",
"webpack": "4.44.2"
},
"jest": {
"transform": {
"^.+\\.tsx?$": "ts-jest",
"^.+\\.svg$": "jest-svg-transformer"
},
"moduleNameMapper": {
"\\.(css|less)$": "identity-obj-proxy"
}
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"msw": {
"workerDirectory": "public"
}
}
platform package.json
{
"name": "platform",
"version": "0.0.1",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start-with-ssl": "node --max-old-space-size=4096 ../node_modules/@angular/cli/bin/ng serve --ssl --ssl-key docker/ssl/server.key --ssl-cert docker/ssl/server.pem",
"build": "node --max-old-space-size=4096 ../node_modules/@angular/cli/bin/ng build --configuration=production",
"test": "jest --maxConcurrency=2 --maxWorkers=2",
"update-snapshots": "jest --updateSnapshot",
"test-with-coverage": "ng test --code-coverage",
"eslint": "eslint 'src/app/**/*.{js,jsx,ts,tsx}'",
"eslint:fix": "eslint --fix 'src/app/**/*.{js,jsx,ts,tsx}'",
"lint": "yarn run eslint",
"tsc": "tsc --skipLibCheck --noEmit",
"e2e": "ng e2e",
"storybook": "start-storybook -s public -p 6006",
"build-storybook": "build-storybook",
"fmt": "prettier --write --config ./.prettierrc.yml '*.{js,yml}' 'src/app/**/*.{js,ts,tsx,scss,component.html}'",
"fmt:check": "prettier --config ./.prettierrc.yml --check '*.{js,yml}' 'src/app/**/*.{js,ts,tsx,scss,component.html}'",
"check": "yarn run fmt:check && yarn run tsc && yarn run lint",
"pre-commit": "yarn run fmt && yarn run check && yarn run test"
},
"jest": {
"transform": {
"^.+\\.tsx?$": "ts-jest",
"^.+\\.svg$": "jest-svg-transformer"
},
"moduleNameMapper": {
"\\.(css|less)$": "identity-obj-proxy"
},
"setupFiles": [
"jest-canvas-mock"
]
},
"private": true,
"dependencies": {
"@angular-redux/store": "^10.0.0",
"@angular/animations": "^12.2.5",
"@angular/cdk": "^12.2.5",
"@angular/common": "^12.2.5",
"@angular/compiler": "^12.2.5",
"@angular/core": "^12.2.5",
"@angular/flex-layout": "^9.0.0-beta.29",
"@angular/forms": "^12.2.5",
"@angular/material": "^12.2.5",
"@angular/platform-browser": "^12.2.5",
"@angular/platform-browser-dynamic": "^12.2.5",
"@angular/router": "^12.2.5",
"@auth0/angular-jwt": "^4.0.0",
"@date-io/date-fns": "1.3.13",
"@fortawesome/angular-fontawesome": "^0.6.1",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-brands-svg-icons": "^5.13.0",
"@fortawesome/free-regular-svg-icons": "^5.13.0",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-fontawesome": "^0.1.14",
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/pickers": "^3.3.10",
"@sentry/browser": "^5.15.5",
"@stripe/react-stripe-js": "^1.5.0",
"@stripe/stripe-js": "^1.19.1",
"@types/hammerjs": "^2.0.39",
"angular-i18next": "^10.1.0",
"auth0-js": "^9.14.0",
"axios": "^0.21.0",
"core-js": "^3.6.5",
"date-fns": "^2.23.0",
"flux-standard-action": "^2.0.3",
"hammerjs": "^2.0.8",
"html-react-parser": "^1.2.6",
"i18next": "^20.2.1",
"i18next-http-backend": "^1.2.1",
"jest-svg-transformer": "^1.0.0",
"keycharm": "^0.4.0",
"lodash": "^4.17.15",
"mixpanel-browser": "^2.28.0",
"ngx-logger": "^4.1.9",
"ngx-mat-select-search": "^3.1.2",
"ngx-quill": "^13.0.1",
"object-hash": "^2.0.3",
"quill": "^1.3.7",
"quill-image-compress": "^1.2.16",
"quill-image-resize-module-react": "^3.0.0",
"react": "^17.0.1",
"react-avatar-editor": "^12.0.0",
"react-color": "^2.19.3",
"react-colorful": "^5.1.4",
"react-currency-format": "^1.0.0",
"react-dnd": "^14.0.4",
"react-dnd-html5-backend": "^14.0.2",
"react-dom": "^17.0.1",
"react-hook-form": "^7.15.2",
"react-i18next": "^11.8.13",
"react-keyed-flatten-children": "^1.3.0",
"react-player": "^2.9.0",
"react-query": "^3.13.6",
"react-quill": "^1.3.5",
"react-redux": "7.2.2",
"react-select": "^4.3.1",
"reduce-reducers": "^1.0.4",
"redux": "4.0.1",
"redux-actions": "^2.6.5",
"redux-devtools-extension": "^2.13.8",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"rxjs": "^6.5.5",
"sass": "^1.39.0",
"svg-react-loader": "^0.4.6",
"tslib": "^2.0.0",
"uuid": "^8.3.1",
"vis-data": "^7.1.2",
"vis-network": "^9.0.4",
"vis-util": "^5.0.2",
"zone.js": "^0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1002.1",
"@angular/cli": "^12.2.5",
"@angular/compiler-cli": "^12.2.5",
"@angular/language-service": "^12.2.5",
"@babel/core": "^7.15.5",
"@storybook/addon-actions": "^6.1.11",
"@storybook/addon-controls": "^6.1.11",
"@storybook/addon-essentials": "^6.1.11",
"@storybook/addon-links": "^6.1.11",
"@storybook/react": "^6.1.11",
"@testing-library/react": "^11.2.6",
"@types/jest": "^26.0.23",
"@types/mixpanel-browser": "^2.23.1",
"@types/node": "^12.11.1",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@typescript-eslint/eslint-plugin": "^4.26.1",
"@typescript-eslint/parser": "^4.26.1",
"babel-loader": "^8.2.2",
"codelyzer": "^5.2.2",
"eslint": "^7.28.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.7.2",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jest": "^24.3.6",
"eslint-plugin-jest-dom": "^3.9.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-testing-library": "^4.6.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"jest-canvas-mock": "^2.3.1",
"msw": "^0.35.0",
"msw-storybook-addon": "^1.3.0",
"prettier": "^2.3.1",
"protractor": "~7.0.0",
"react-test-renderer": "^17.0.2",
"redux-mock-store": "^1.5.4",
"ts-jest": "^26.5.6",
"ts-node": "~8.0.1",
"typescript": "4.3.5",
"webpack-bundle-analyzer": "^4.4.0"
},
"msw": {
"workerDirectory": "public"
}
}
hub tsconfig.json
{
"extends": "./tsconfig.base.json",
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
"importHelpers": true,
"module": "es2020",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"noUnusedLocals": true,
"noUnusedParameters": true,
"typeRoots": ["node_modules/@types", "../node_modules/@types"],
"lib": ["es2015", "es2016", "es2017.object", "dom"],
"jsx": "react",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"tslib": ["path/to/node_modules/tslib/tslib.d.ts"]
}
}
}
platform tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
"importHelpers": true,
"module": "es2020",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"noUnusedLocals": true,
"noUnusedParameters": true,
"typeRoots": ["node_modules/@types", "../node_modules/@types"],
"lib": ["es2015", "es2016", "es2017.object", "dom"],
"jsx": "react",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"tslib" : ["path/to/node_modules/tslib/tslib.d.ts"],
"node_modules": ["node_modules","../node_modules"],
"@priz/shared/*": ["../shared/src/*"]
}
}
}
So, as a result:
The platform is functioning perfectly fine.
When I am trying to start hub with yarn run start, I am getting the following error.
Of course, I could disable preflight check, but I don't really want to go this route. It is almost like it's ignoring the local node_modules and gets the package from the root.
Why is it happening? Is there a way to force yarn to get the local package as a priority? What am I missing?
Another thing to add, it looks like if I delete yarn cache it works. But, after the next build, everything is back to the same error.