I'm trying to implement eslint caching in our project. While it works just fine on the local machine, it doesn't work in the gitlab lint stage.
Local:
Gitlab:
As can be seen from screenshots, gitlab doesn't use the cache.
package.json:
"scripts": {
"build": "nuxt build",
"dev": "nuxt",
"generate": "nuxt generate",
"start": "nuxt start",
"lint": "npm-run-all lint:eslint lint:ts lint:stylelint",
"lint:eslint": "./node_modules/.bin/eslint --cache --cache-strategy content -c .eslintrc.js .",
"lint:eslint:fix": "npm run lint:eslint -- --fix",
"lint:ts": "tsc --noEmit",
"lint:stylelint": "./node_modules/.bin/stylelint --cache --config stylelint.config.js .",
"lint:stylelint:fix": "npm run lint:stylelint -- --fix",
"test": "npm run cypress:start",
"test-ci": "npm run cypress:start-ci",
"test-e2e": "start-server-and-test dev http://localhost:3000 cypress open --e2e",
"cypress:start": "RESPOND_MOCK_RESULT_DELAY=1 cypress open --component",
"cypress:start-ci": "RESPOND_MOCK_RESULT_DELAY=1 cypress run --component --browser chrome",
"storybook": "start-storybook -p 9000 --no-version-updates",
"build-storybook": "build-storybook -c .storybook",
"postinstall": "husky install",
"clean-tsc": "rimraf tmp"
},
"lint-staged": {
"**/*.{vue, ts}": [
"./node_modules/.bin/eslint ./config/linters/eslint-config.js --max-warnings=0"
],
"**/*.ts": [
"bash -c tsc --noEmit"
],
"**/*.scss": [
"./node_modules/.bin/stylelint --config stylelint.config.js"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"post-commit": "clean-tsc"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"devDependencies": {
"#babel/core": "7.13.15",
"#babel/plugin-transform-runtime": "7.13.15",
"#babel/preset-env": "7.13.15",
"#nuxt/babel-preset-app": "2.15.6",
"#nuxt/types": "2.15.8",
"#nuxt/typescript-build": "2.1.0",
"#nuxtjs/axios": "5.13.6",
"#nuxtjs/dotenv": "1.4.1",
"#storybook/addon-actions": "6.3.8",
"#storybook/addon-links": "6.3.8",
"#storybook/addon-storysource": "6.3.8",
"#storybook/addon-viewport": "6.3.8",
"#storybook/vue": "6.3.8",
"#types/crypto-js": "4.1.0",
"#types/lodash": "4.14.178",
"#types/node": "16.7.8",
"#types/swiper": "5.4.3",
"#types/vuelidate": "0.7.15",
"#types/webpack-env": "1.16.0",
"#typescript-eslint/eslint-plugin": "4.22.1",
"#typescript-eslint/parser": "4.22.1",
"#vue/test-utils": "1.3.0",
"anychart": "8.11.0",
"app-root-path": "3.0.0",
"babel-eslint": "10.1.0",
"babel-loader": "8.2.2",
"crypto-js": "4.1.1",
"css-loader": "5.2.7",
"cypress": "10.10.0",
"cypress-multi-reporters": "1.6.1",
"date-fns": "2.28.0",
"dotenv-flow": "3.2.0",
"element-ui": "2.15.9",
"eslint": "7.25.0",
"eslint-config-airbnb-base": "14.2.1",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-unused-imports": "1.1.5",
"eslint-plugin-vue": "7.9.0",
"eslint-webpack-plugin": "2.5.4",
"flag-icons": "6.0.3",
"fork-ts-checker-webpack-plugin": "6.2.12",
"husky": "8.0.1",
"iso-country-currency": "0.6.0",
"jwt-decode": "3.1.2",
"lint-staged": "10.5.4",
"lodash": "4.17.21",
"lvovich": "2.0.0",
"normalize.css": "8.0.1",
"npm-run-all": "4.1.5",
"nuxt": "2.15.8",
"nuxt-property-decorator": "2.9.1",
"postcss-easy-media-query": "1.0.0",
"postcss-inline-svg": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-scss": "2.1.1",
"resolve-url-loader": "3.1.2",
"rimraf": "3.0.2",
"sass": "1.32.13",
"sass-loader": "10.2.0",
"start-server-and-test": "1.14.0",
"storybook-addon-designs": "6.1.0",
"storybook-vue-router": "1.0.7",
"style-loader": "1.2.1",
"stylelint": "13.13.1",
"stylelint-config-rational-order": "0.1.2",
"stylelint-config-standard": "22.0.0",
"stylelint-order": "4.1.0",
"stylelint-webpack-plugin": "2.1.1",
"swiper": "5.3.8",
"ts-loader": "8.2.0",
"ts-node": "10.2.1",
"typescript": "3.9.9",
"uuid": "8.3.2",
"vue": "2.6.14",
"vue-awesome-swiper": "4.1.1",
"vue-bem-cn": "1.1.1",
"vue-click-outside": "1.1.0",
"vue-eslint-parser": "7.6.0",
"vue-inline-svg": "2.1.0",
"vue-inputmask": "0.2.1",
"vue-loader": "15.9.3",
"vue-popperjs": "2.3.0",
"vue-property-decorator": "9.1.2",
"vue2-datepicker": "3.10.4",
"vuelidate": "0.7.6",
"vuex": "3.6.2",
"vuex-module-decorators": "1.2.0",
"vuex-persistedstate": "3.2.1",
"webpack": "4.46.0",
"webpack-dev-server": "3.11.2"
},
"resolutions": {
"#babel/core": "7.13.15",
"#babel/preset-env": "7.13.15"
},
"packageManager": "yarn#2.4.2"
gitlab stage output:
Running with gitlab-runner 14.9.1 (bd40e3da)
on Runner1 cEWYset_
Preparing the "docker" executor
Using Docker executor with image node:16 ...
Pulling docker image node:16 ...
Using docker image sha256:147af8719073e2afc51f6c60792867b0329ef40b2e76dbf6dedd9afc85b510f3 for node:16 with digest node#sha256:6d592fdb89fccdeb880d14f30bf139b8a755f33b376f025b70e50ac5547c8ccf ...
Preparing environment
Running on runner-cewyset-project-17-concurrent-0 via runner1...
Getting source from Git repository
Fetching changes with git depth set to 1...
Initialized empty Git repository in /builds/my_project/.git/
Created fresh repository.
Checking out ce13aedf as issue/NBOM-682...
Skipping Git submodules setup
Executing "step_script" stage of the job script
Using docker image sha256:147af8719073e2afc51f6c60792867b0329ef40b2e76dbf6dedd9afc85b510f3 for node:16 with digest node#sha256:6d592fdb89fccdeb880d14f30bf139b8a755f33b376f025b70e50ac5547c8ccf ...
$ yarn install --immutable --immutable-cache --skip-builds
➤ YN0000: ┌ Resolution step
Resolution step
00:00
➤ YN0002: │ #nuxt/types#npm:2.15.8 doesn't provide webpack (p1a032), requested by sass-loader
➤ YN0002: │ #nuxt/typescript-build#npm:2.1.0 [7e7d0] doesn't provide webpack (p59f68), requested by fork-ts-checker-webpack-plugin
➤ YN0002: │ #nuxt/typescript-build#npm:2.1.0 [7e7d0] doesn't provide webpack (pc05f7), requested by ts-loader
➤ YN0002: │ #storybook/core#npm:6.3.8 [2e4c8] doesn't provide webpack (p4aa58), requested by #storybook/core-client
➤ YN0002: │ #storybook/csf-tools#npm:6.3.8 doesn't provide #babel/core (p4793d), requested by #babel/plugin-transform-react-jsx
➤ YN0002: │ #storybook/csf-tools#npm:6.3.8 doesn't provide #babel/core (p197f9), requested by #babel/preset-env
➤ YN0002: │ #storybook/vue#npm:6.3.8 [7e7d0] doesn't provide typescript (p6db5c), requested by ts-loader
➤ YN0060: │ aplgo-backoffice#workspace:. provides #storybook/addon-actions (p35c9b) with version 6.3.8, which doesn't satisfy what storybook-vue-router requests
➤ YN0002: │ aplgo-backoffice#workspace:. doesn't provide #storybook/addons (p8488a), requested by storybook-vue-router
➤ YN0002: │ aplgo-backoffice#workspace:. doesn't provide mocha (pdf97f), requested by cypress-multi-reporters
➤ YN0002: │ aplgo-backoffice#workspace:. doesn't provide vue-class-component (p9513b), requested by vue-property-decorator
➤ YN0002: │ aplgo-backoffice#workspace:. doesn't provide vue-router (p4a39c), requested by storybook-vue-router
➤ YN0002: │ aplgo-backoffice#workspace:. doesn't provide vue-template-compiler (pb9003), requested by #storybook/vue
➤ YN0002: │ aplgo-backoffice#workspace:. doesn't provide vue-template-compiler (pb2b16), requested by #vue/test-utils
➤ YN0002: │ nuxt-property-decorator#npm:2.9.1 doesn't provide vue (pbab38), requested by vue-class-component
➤ YN0002: │ nuxt-property-decorator#npm:2.9.1 doesn't provide vue (p28c57), requested by vue-property-decorator
➤ YN0002: │ nuxt-property-decorator#npm:2.9.1 doesn't provide vue (pfcb4b), requested by vuex-class
➤ YN0002: │ nuxt-property-decorator#npm:2.9.1 doesn't provide vue (p81681), requested by vuex-module-decorators
➤ YN0002: │ nuxt-property-decorator#npm:2.9.1 doesn't provide vuex (p77ea5), requested by vuex-class
➤ YN0002: │ nuxt-property-decorator#npm:2.9.1 doesn't provide vuex (p14b0f), requested by vuex-module-decorators
➤ YN0002: │ nuxt#npm:2.15.8 doesn't provide consola (p2d844), requested by #nuxt/components
➤ YN0002: │ react-dev-utils#npm:11.0.4 doesn't provide typescript (p79ddf), requested by fork-ts-checker-webpack-plugin
➤ YN0002: │ react-dev-utils#npm:11.0.4 doesn't provide webpack (p2af19), requested by fork-ts-checker-webpack-plugin
➤ YN0002: │ storybook-addon-designs#npm:6.1.0 doesn't provide react (p0b861), requested by #figspec/react
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 497ms
➤ YN0000: ┌ Fetch step
Fetch step
00:01
➤ YN0013: │ 2162 packages were already cached
➤ YN0000: └ Completed in 1s 220ms
➤ YN0000: ┌ Link step
Link step
➤ YN0062: │ fsevents#patch:fsevents#npm%3A2.3.2#builtin<compat/fsevents>::version=2.3.2&hash=11e9ea The platform linux is incompatible with this module, link skipped.
➤ YN0062: │ fsevents#patch:fsevents#npm%3A1.2.13#builtin<compat/fsevents>::version=1.2.13&hash=11e9ea The platform linux is incompatible with this module, link skipped.
➤ YN0006: │ aplgo-backoffice#workspace:. lists build scripts, but is referenced through a soft link. Soft links don't support build scripts, so they'll be ignored.
➤ YN0000: └ Completed in 33s 176ms
➤ YN0000: Done with warnings in 35s 508ms
$ DEBUG=eslint:cli-engine yarn lint:eslint
2022-10-21T05:51:57.876Z eslint:cli-engine Lint /builds/aplgo/my-project/accordion-block/index.ts
...
gitlab lint.yml
I hoped that --cache-strategy content will work correctly after git clone in CI.. Maybe I missed smth?
Related
I have a packages version mismatch that I don't understand how to fix.
When I do:
rm -rf node_modules package-lock.json
npm install
npm run dev
I'm getting the following error:
╭────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ Error: │
│ │
│ Vue packages version mismatch: │
│ │
│ - vue#2.6.14 │
│ - vue-server-renderer#2.7.10 │
│ │
│ This may cause things to work incorrectly. Make sure to use the same version for both. │
│ │
│ │
╰────────────────────────────────────────────────────────────────────────────────────────────╯
So, I checked what was installing vue-server-renderer#2.7.10 using npm-tree, and I'm getting this dependencies tree:
├─┬ nuxt 2.15.8
│ └─┬ #nuxt/vue-renderer 2.15.8
│ ├── vue-server-renderer 2.7.10
Why would #nuxt/vue-renderer install vue-server-renderer 2.7.10 instead of 2.15.8 ?
And how can I fix it ?
package.json:
{
"name": "my project",
"version": "1.3.0",
"description": "my project description",
"author": "John",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint": "npm run lint:js"
},
"dependencies": {
"#nuxtjs/auth-next": "^5.0.0-1648802546.c9880dc",
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/markdownit": "^2.0.0",
"#nuxtjs/proxy": "^2.1.0",
"core-js": "^3.25.2",
"echarts": "^5.3.3",
"jshint": "^2.13.5",
"lodash": "^4.17.21",
"nuxt": "^2.15.8",
"nuxt-highlightjs": "^1.0.3",
"nuxt-leaflet": "^0.0.27",
"vue-echarts": "^6.2.3",
"xlsx": "^0.18.5"
},
"devDependencies": {
"#nuxt/types": "^2.15.8",
"#nuxt/typescript-build": "^2.1.0",
"#nuxtjs/composition-api": "^0.32.0",
"#nuxtjs/date-fns": "^1.5.0",
"#nuxtjs/vuetify": "^1.12.3",
"eslint": "^8.23.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-nuxt": "4.0.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.5.1",
"prettier": "^2.7.1"
}
}
Unable to update minimist dependency to secure version. I am trying to update package minimist to 0.2.1 and I did following changes :
"resolutions": {
"minimist": "~0.2.1"
}
"scripts":{
"preinstall": "npx npm-force-resolutions"
}
npm install works fine , but npm ls minimist shows:
myapp % npm ls minimist
├─┬ babel-cli#6.26.0
│ └─┬ chokidar#1.7.0
│ └─┬ fsevents#1.1.3
│ ├── minimist#1.2.6 extraneous
│ └─┬ node-pre-gyp#0.6.39
│ ├─┬ mkdirp#0.5.1
│ │ └── minimist#1.2.6 invalid
│ └─┬ rc#1.2.1
│ └── minimist#1.2.6
├─┬ babel-loader#7.1.5
│ └─┬ mkdirp#0.5.1
│ └── minimist#1.2.6 invalid
├─┬ grunt#1.0.1
│ ├─┬ dateformat#1.0.12
│ │ └─┬ meow#3.7.0
│ │ └── minimist#1.2.6
│ └── minimist#1.2.6 extraneous
├─┬ karma#1.5.0
│ └─┬ optimist#0.6.1
│ └── minimist#1.2.6 invalid
├─┬ karma-mocha#1.3.0
│ └── minimist#1.2.6 invalid
├── minimist#1.2.6
├─┬ phantomjs-prebuilt#2.1.16
│ ├─┬ extract-zip#1.6.6
│ │ └─┬ mkdirp#0.5.0
│ │ └── minimist#1.2.6 invalid
│ └── minimist#1.2.6 extraneous
├─┬ UNMET PEER DEPENDENCY webpack#3.12.0
│ └─┬ watchpack#1.6.0
│ └─┬ chokidar#2.0.4
│ └─┬ fsevents#1.2.4
│ ├── minimist#1.2.6 extraneous
│ └─┬ node-pre-gyp#0.10.0
│ ├─┬ mkdirp#0.5.1
│ │ └── minimist#1.2.6 invalid
│ └─┬ rc#1.2.7
│ └── minimist#1.2.6
└─┬ webpack-dev-server#2.9.7
└─┬ internal-ip#1.2.0
└─┬ meow#3.7.0
└── minimist#1.2.6
npm ERR! invalid: minimist#1.2.6/Users/......./../.../node_modules/json5/node_modules/minimist
npm ERR! invalid: minimist#1.2.6 /Users/node_modules/minimist
npm ERR! invalid: minimist#1.2.6/Users/node_modules/tsconfig-paths/node_modules/minimist
npm ERR! invalid: minimist#1.2.6 /Users/node_modules/meow/node_modules/minimist
npm ERR! invalid: minimist#1.2.6/Users/node_modules/optimist/node_modules/minimist
npm ERR! invalid: minimist#1.2.6 /Users/node_modules/karma-mocha/node_modules/minimist
npm ERR! extraneous: minimist#1.2.6 /Users/node_modules/mocha/node_modules/minimist
............
............
Is it not possible to update dependency of dependency like this?What is the way to get this done?
Edit:
Package.json
{
"name": "myapp",
"version": "0.0.1",
"description": "DESC",
"main": "index.js",
"scripts": {
"build": "grunt build",
"preinstall": "npx npm-force-resolutions"
},
"repository": {
"type": "git",
"url": "articatroy.url"
},
"keywords": [],
"author": "",
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-plugin-inline-json-import": "^0.2.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-airbnb": "^2.4.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-mobx": "^1.0.2",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"bundle-loader": "~0.5.5",
"chai": "~3.5.0",
"css-loader": "^0.28.11",
"enzyme": "^3.3.0",
"minimist": "^1.2.3",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"fetch-mock": "^6.4.2",
"file-loader": "~1.1.5",
"grunt": "~1.0.1",
"grunt-contrib-clean": "~1.0.0",
"grunt-contrib-copy": "~1.0.0",
"grunt-env": "~0.4.4",
"grunt-karma": "~2.0.0",
"grunt-webpack": "~2.0.1",
"sonarqube-scanner": "2.5.0",
"karma": "~1.5.0",
"karma-chrome-launcher": "^2.2.0",
"karma-mocha": "~1.3.0",
"karma-mocha-reporter": "~2.2.3",
"karma-phantomjs-launcher": "~1.0.4",
"karma-safari-launcher": "~1.0.0",
"karma-sourcemap-loader": "~0.3.7",
"karma-webpack": "2.0.3",
"load-grunt-tasks": "~3.5.2",
"mocha": "~3.2.0",
"phantomjs-prebuilt": "~2.1.14",
"sinon": "^5.0.10",
"style-loader": "^0.21.0",
"webpack": "^3.8.1",
"webpack-dev-server": "~2.9.3",
"uuid": "^3.3.2"
},
"dependencies": {
"#react/react-spectrum": "^2.21.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.23.0",
"build-url": "^1.2.0",
"classnames": "^2.2.5",
"es6-promise": "~4.1.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "~3.1.1",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"loglevel": "^1.6.1",
"mobx": "^4.2.0",
"mobx-react": "^5.1.2",
"moment": "^2.24.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-router-dom": "^4.2.2",
"style-loader": "^0.21.0",
"underscore": "^1.8.3",
"url-parse": "^1.4.0",
"uuid": "^3.3.2",
"minimist": "^1.2.3"
},
"resolutions": {
"minimist": "^1.2.3"
}
}
resolutions is when using ymal.
for npm you should use overrides
https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides
notice you will need npm version 8.3 at least
Since I've updated to yarn berry via: yarn set version berry I cannot run my project, the dependency tree is somehow broken. For ease I've provided examples for react-router but this happends with other packages too.
I have a monorepo with this structure:
/
|- .yarn
|- node_modules
|- common/
|- backoffice/
|- frontoffice/
|- test
|- .yarnrc.yml
|- package.json
|- lerna.json
frontoffice and backoffice are react apps. While common have the shared interfaces and components.
backoffice depends on react-router#5 and is writtenn in typescript while the frontoffice depends on react-router#6-beta and is ES5.
When I try to start the backoffice or the frontoffice I have the errors:
$ cd packages/frontoffice
$ yarn start
Failed to compile.
Attempted import error: 'Redirect' is not exported from 'react-router'.
In fact the backoffice is using react-router#v6 and frontoffice is using react-router#5
when I try to start the backoffice I get the error:
Type '{ path: any; render: (props: any) => Element; }' is not assignable to type 'IntrinsicAttributes & Pick<RouteProps, "path" | "children" | "caseSensitive" | "element"> & Pick<InferProps<{ caseSensitive: Requireable<boolean>; childr
en: Requireable<...>; element: Requireable<...>; path: Requireable<...>; }>, never> & Pick<...>'.
Property 'render' does not exist on type 'IntrinsicAttributes & Pick<RouteProps, "path" | "children" | "caseSensitive" | "element"> & Pick<InferProps<{ caseSensitive: Requireable<boolean>; children: Requireable<...>; element: Require
able<...>; path: Requireable<...>; }>, never> & Pick<...>'. TS2322
Also the IDE is highlighting the code, with errors everywhere on all packages.
I've run the lerna why command and to me everything seems fine:
$ yarn why react
├─ #mymonorepo/backoffice#workspace:packages/backoffice
│ └─ react#npm:17.0.1 (via npm:^17.0.1)
│
├─ #mymonorepo/test#workspace:packages/test
│ └─ react#npm:17.0.1 (via npm:^17.0.1)
│
├─ #mymonorepo/frontoffice#workspace:packages/frontoffice
│ └─ react#npm:17.0.1 (via npm:17.0.1)
│
└─ react-dragscroll#npm:2.0.1
└─ react#npm:16.14.0 (via npm:^16.1.1)
$ yarn why react-router
├─ #mymonorepo/backoffice#workspace:packages/backoffice
│ └─ react-router#npm:5.2.1 [1602b] (via npm:^5.2.0 [1602b])
│
├─ #mymonorepo/test#workspace:packages/test
│ └─ react-router#npm:5.2.1 [1602b] (via npm:^5.2.0 [1602b])
│
├─ #mymonorepo/frontoffice#workspace:packages/frontoffice
│ └─ react-router#npm:6.0.0-beta.0 [46813] (via npm:6.0.0-beta.0 [46813])
│
├─ react-router-dom#npm:5.3.0
│ └─ react-router#npm:5.2.1 (via npm:5.2.1)
│
├─ react-router-dom#npm:6.0.0-beta.0
│ └─ react-router#npm:6.0.0-beta.0 (via npm:6.0.0-beta.0)
│
├─ react-router-dom#npm:5.3.0 [1602b]
│ └─ react-router#npm:5.2.1 [1602b] (via npm:^5.2.0 [1602b])
│
└─ react-router-dom#npm:6.0.0-beta.0 [46813]
└─ react-router#npm:6.0.0-beta.0 [46813] (via npm:6.0.0-beta.0 [46813])
$ yarn why react-router-dom
├─ #mymonorepo/backoffice#workspace:packages/backoffice
│ └─ react-router-dom#npm:5.3.0 [1602b] (via npm:^5.2.0 [1602b])
│
├─ #mymonorepo/test#workspace:packages/test
│ └─ react-router-dom#npm:5.3.0 [1602b] (via npm:^5.2.0 [1602b])
│
└─ #mymonorepo/frontoffice#workspace:packages/frontoffice
└─ react-router-dom#npm:6.0.0-beta.0 [46813] (via npm:6.0.0-beta.0 [46813])
$
Did I forget something to configure? Is there a way to force the right version for each package?
the nodeLinker option in .yarnrc.yml is set to node-modules
the pakage.json are the following:
/package.json
{
"name": "mymonorepo",
"version": "0.1.0",
"license": "MIT",
"private": true,
"workspaces": {
"packages": [
"packages/*"
]
},
"resolutions": {
"graphql": "^15.3.0"
},
"devDependencies": {
"husky": "^4.3.8",
"lerna": "^3.22.1",
"lint-staged": "^10.5.3"
},
"packageManager": "yarn#3.2.0"
}
/backoffice/package.json
{
"name": "#mymonorepo/backoffice",
"version": "3.0.0",
"private": true,
"dependencies": {
"#apollo/client": "^3.5.8",
"#material-ui/core": "^4.12.1",
"#material-ui/icons": "^4.11.2",
...
"react": "^17.0.0",
"react-admin": "^3.19.7",
"react-app-polyfill": "^2.0.0",
"react-dom": "^17.0.0",
"react-redux": "^7.1.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.0",
"recharts": "^1.8.5",
"redux-saga": "^1.0.0"
},
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "react-scripts start",
"build": "node ./build.js",
"eject": "react-scripts test"
},
"homepage": ".",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 10",
"not op_mini all"
],
"devDependencies": {
"#types/classnames": "^2.3.1",
"#types/fetch-mock": "^7.3.2",
"#types/jest": "^26.0.19",
"#types/node": "^12.12.14",
"#types/query-string": "5.1.0",
"#types/react": "^17.0.20",
"#types/react-dom": "^17.0.9",
"#types/react-router": "^5.2.0",
"#types/react-router-dom": "^5.2.0",
"rewire": "^5.0.0",
"source-map-explorer": "^2.0.0",
"typescript": "^4.4.0"
}
}
/frontoffice/package.json
{
"name": "#mymonorepo/frontoffice",
"version": "2.1.0",
"dependencies": {
"#apollo/client": "^3.1.3",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.15",
...
"react": "17.0.1",
"react-compound-timer": "^1.1.15",
"react-content-loader": "^5.1.4",
"react-custom-scrollbars-2": "^4.3.0",
"react-detect-offline": "^2.4.0",
"react-device-detect": "^1.6.2",
"react-dom": "17.0.1",
"react-fullscreen-image": "^0.0.3",
"react-gtm-module": "^2.0.8",
"react-helmet": "^6.1.0",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-router-hash-link": "^2.0.0",
"react-router-modal": "^2.0.0-rc3",
"react-scripts": "^4.0.1",
"react-scroll-trigger": "^0.6.6",
"react-share": "^4.2.1",
"react-show-more-text": "^1.4.6",
"react-ticker": "^1.2.2",
"react-use-dimensions": "^1.2.1",
"react-window": "^1.8.6",
...
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts --max_old_space_size=4096 build --silent",
"test": "react-scripts test",
"eject": "react-scripts eject",
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"depcheck": "^1.3.1",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0"
}
}
I am .net developer.Previous developer used nodeJS and react for one project.I must complete that project.That project use nodeJS,and reactJS.I installed NodeJS in windows 8
I install packages(npm install) it worked well.But now I try to run start project(npm start) but it give error about babel.
C:\rc>npm start
> react-seed#0.0.13 prestart C:\rc
> npm install
npm WARN package.json react-seed#0.0.13 No license field.
> node-sass#3.4.2 install C:\rc\node_modules\node-sass
> node scripts/install.js
> node-sass#3.4.2 postinstall C:\rc\node_modules\node-sass
> node scripts/build.js
` C:\rc\node_modules\node-sass\vendor\win32-x64-46\binding.node ` exists.
testing binary.
Binary is fine; exiting.
npm WARN unmet dependency C:\rc\node_modules\rimraf requires glob#'^7.0.0' but w
ill load
npm WARN unmet dependency C:\rc\node_modules\glob,
npm WARN unmet dependency which is version 5.0.15
npm WARN unmet dependency C:\rc\node_modules\babel-plugin-transform-decorators-l
egacy requires babel-runtime#'^6.2.0' but will load
npm WARN unmet dependency C:\rc\node_modules\babel-runtime,
npm WARN unmet dependency which is version 5.8.38
npm WARN unmet dependency C:\rc\node_modules\babel-preset-es2015\node_modules\ba
bel-plugin-transform-regenerator requires babel-core#'^6.6.5' but will load
npm WARN unmet dependency C:\rc\node_modules\babel-core,
npm WARN unmet dependency which is version 5.8.38
npm WARN unmet dependency C:\rc\node_modules\karma-mocha-reporter\node_modules\k
arma requires glob#'^7.0.0' but will load
npm WARN unmet dependency C:\rc\node_modules\glob,
npm WARN unmet dependency which is version 5.0.15
> react-seed#0.0.13 start C:\rc
> set NODE_ENV=development && node dev-server ./webpack/config
Listening at http://0.0.0.0:8000
Hash: dfc04e15fb6c36f0d4eb
Version: webpack 1.12.14
Time: 812ms
Asset Size Chunks Chunk Names
vendor.bundle.js 839 bytes 0 vendor
js\app.0.0.13.js 102 bytes 1 app
chunk {0} vendor.bundle.js (vendor) 28 bytes [rendered]
[0] multi vendor 28 bytes {0} [built] [1 error]
chunk {1} js\app.0.0.13.js (app) 28 bytes {0} [rendered]
[0] multi app 28 bytes {1} [built] [1 error]
ERROR in ./app/app.jsx
Module build failed: ReferenceError: [BABEL] C:\rc\app\app.jsx: Unknown option:
direct.presets
at Logger.error (C:\rc\node_modules\babel-core\lib\transformation\file\logge
r.js:58:11)
at OptionManager.mergeOptions (C:\rc\node_modules\babel-core\lib\transformat
ion\file\options\option-manager.js:126:29)
at OptionManager.init (C:\rc\node_modules\babel-core\lib\transformation\file
\options\option-manager.js:216:10)
at File.initOptions (C:\rc\node_modules\babel-core\lib\transformation\file\i
ndex.js:147:75)
at new File (C:\rc\node_modules\babel-core\lib\transformation\file\index.js:
137:22)
at Pipeline.transform (C:\rc\node_modules\babel-core\lib\transformation\pipe
line.js:164:16)
at transpile (C:\rc\node_modules\babel-loader\index.js:12:22)
at Object.module.exports (C:\rc\node_modules\babel-loader\index.js:71:12)
# multi app
ERROR in ./app/vendor.js
Module build failed: ReferenceError: [BABEL] C:\rc\app\vendor.js: Unknown option
: direct.presets
at Logger.error (C:\rc\node_modules\babel-core\lib\transformation\file\logge
r.js:58:11)
at OptionManager.mergeOptions (C:\rc\node_modules\babel-core\lib\transformat
ion\file\options\option-manager.js:126:29)
at OptionManager.init (C:\rc\node_modules\babel-core\lib\transformation\file
\options\option-manager.js:216:10)
at File.initOptions (C:\rc\node_modules\babel-core\lib\transformation\file\i
ndex.js:147:75)
at new File (C:\rc\node_modules\babel-core\lib\transformation\file\index.js:
137:22)
at Pipeline.transform (C:\rc\node_modules\babel-core\lib\transformation\pipe
line.js:164:16)
at transpile (C:\rc\node_modules\babel-loader\index.js:12:22)
at Object.module.exports (C:\rc\node_modules\babel-loader\index.js:71:12)
# multi vendor
webpack: bundle is now VALID.
Here is my package.json
{
"name": "react-seed",
"version": "0.0.13",
"description": "Seed project for React apps using ES6 & webpack.",
"repository": "https://github.com/badsyntax/react-seed",
"config": {
"buildDir": "./build",
"buildDirTests": "./build_tests",
"devHost": "0.0.0.0",
"devPort": 8000,
"remoteHost": "https://mokey.gear.host"
},
"scripts": {
"build": "NODE_ENV=production npm run webpack",
"clean": "rimraf $npm_package_config_buildDir && mkdir $npm_package_config_buildDir",
"env": "env",
"lint": "eslint --ext .js --ext .jsx ./app ./webpack && echo No linting errors.",
"prebuild": "npm run clean",
"prestart": "npm install",
"pretest": "npm install && npm run lint",
"pretest-travis": "npm install && npm run lint",
"start": "set NODE_ENV=development && node dev-server ./webpack/config",
"test": "NODE_ENV=test karma start --single-run",
"test-dev": "NODE_ENV=test karma start",
"test-travis": "NODE_ENV=test karma start --single-run",
"webpack": "webpack --colors --progress --config ./webpack/config"
},
"dependencies": {
"classnames": "^2.1.1",
"hammerjs": "^2.0.4",
"immutable": "^3.7.6",
"intl": "^1.0.0",
"intl-locales-supported": "^1.0.0",
"jquery": "^2.1.4",
"lodash": "^4.6.1",
"materialize-css": "^0.97.5",
"ms-signalr-client": "^2.2.2",
"normalize.css": "^3.0.3",
"react": "^0.14.7",
"react-dnd": "^2.1.3",
"react-dnd-html5-backend": "^2.1.2",
"react-dom": "^0.14.7",
"react-flexgrid": "^0.7.0",
"react-intl": "^2.0.0-rc-1",
"react-redux": "^4.4.1",
"redux": "^3.3.1",
"redux-thunk": "^2.0.1",
"superagent": "^1.3.0"
},
"devDependencies": {
"autoprefixer-core": "^5.1.11",
"babel-core": "^5.3.3",
"babel-eslint": "^3.1.23",
"babel-loader": "^5.0.0",
"babel-plugin-rewire": "^0.1.8",
"babel-preset-react": "^6.5.0",
"babel-runtime": "^5.3.3",
"chai": "^2.3.0",
"compass-mixins": "^0.12.7",
"css-loader": "^0.12.1",
"eslint": "^0.21.0",
"eslint-plugin-react": "^2.3.0",
"expose-loader": "^0.7.0",
"extract-text-webpack-plugin": "^0.8.0",
"file-loader": "^0.8.1",
"glob": "^5.0.6",
"html-loader": "^0.3.0",
"json-loader": "^0.5.1",
"karma": "^0.12.31",
"karma-chrome-launcher": "^0.1.12",
"karma-cli": "0.0.4",
"karma-mocha": "^0.1.10",
"karma-mocha-reporter": "^1.0.2",
"karma-phantomjs-launcher": "^0.1.4",
"karma-sinon": "^1.0.4",
"karma-source-map-support": "^1.0.0",
"karma-sourcemap-loader": "^0.3.4",
"karma-webpack": "^1.5.1",
"mocha": "^2.2.4",
"mocha-loader": "^0.7.1",
"node-libs-browser": "^0.5.0",
"opn": "^1.0.2",
"postcss-loader": "^0.4.3",
"react-hot-loader": "^1.2.7",
"rimraf": "^2.3.3",
"sass-loader": "^0.4.2",
"sinon": "^1.14.1",
"source-map-support": "^0.2.10",
"style-loader": "^0.12.2",
"template-html-loader": "0.0.3",
"webpack": "^1.9.5",
"webpack-dev-server": "^1.8.2"
},
"engines": {
"node": ">=0.10.0"
},
"eslintConfig": {
"env": {
"browser": true,
"node": true,
"es6": true
},
"ecmaFeatures": {
"modules": true,
"jsx": true
},
"globals": {
"describe": true,
"it": true,
"xit": true,
"xdescribe": true,
"beforeEach": true,
"sinon": true
},
"plugins": [
"react"
],
"parser": "babel-eslint",
"rules": {
"strict": true,
"indent": [
2,
2
],
"quotes": [
2,
"single"
],
"new-cap": 0,
"no-unused-expressions": 0,
"no-underscore-dangle": 0,
"react/display-name": 0,
"react/jsx-quotes": 1,
"react/jsx-no-undef": 1,
"react/jsx-sort-props": 1,
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
"react/no-did-mount-set-state": 1,
"react/no-did-update-set-state": 1,
"react/no-multi-comp": 1,
"react/no-unknown-property": 1,
"react/prop-types": 1,
"react/react-in-jsx-scope": 1,
"react/self-closing-comp": 1,
"react/wrap-multilines": 1
}
}
}
Sounds like you have configuration for Babel v6 (e.g. presets option) somewhere (.babelrc?) but you're using Babel v5.
I have installed webpack both globally (first) and for a certain project also (PC, windows 10). Seems that the project dir contains all the folders that it needed:
c:\Users\srgg6701\Documents\Projects\Compilers\Webpack\try>npm install webpack --save-dev
npm WARN optional dep failed, continuing fsevents#1.0.5
webpack#1.12.9 node_modules\webpack
├── interpret#0.6.6
├── clone#1.0.2
├── tapable#0.1.10
├── async#1.5.0
├── esprima#2.7.0
├── enhanced-resolve#0.9.1 (graceful-fs#4.1.2, memory-fs#0.2.0)
├── supports-color#3.1.2 (has-flag#1.0.0)
├── mkdirp#0.5.1 (minimist#0.0.8)
├── optimist#0.6.1 (wordwrap#0.0.3, minimist#0.0.10)
├── memory-fs#0.3.0 (errno#0.1.4, readable-stream#2.0.4)
├── webpack-core#0.6.8 (source-list-map#0.1.5, source-map#0.4.4)
├── loader-utils#0.2.12 (big.js#3.1.3, json5#0.4.0)
├── uglify-js#2.6.1 (async#0.2.10, uglify-to-browserify#1.0.2, source-map#0.5.3, yargs#3.10.0)
├── node-libs-browser#0.5.3 (tty-browserify#0.0.0, https-browserify#0.0.0, path-browserify#0.0.0, constants-browserify#0.0.1, punycode#1.3.2, string_decoder#0.10.31, os-browserify#0.1.2, process#0.11.2, domain-browser#1.1.4, assert#1.3.0, querystring-es3#0.2.1, timers-browserify#1.4.1, stream-browserify#1.0.0, events#1.1.0, readable-stream#1.1.13, util#0.10.3, console-browserify#1.1.0, url#0.10.3, vm-browserify#0.0.4, http-browserify#1.7.0, browserify-zlib#0.1.4, buffer#3.5.4, crypto-browserify#3.2.8)
└── watchpack#0.2.9 (graceful-fs#4.1.2, async#0.9.2, chokidar#1.4.0)
But when I run the command in the project dir:
c:\Users\srgg6701\Documents\Projects\Compilers\Webpack\try>node webpack ./app.js bundle.js
It reveals an error:
module.js:338
throw err;
^
Error: Cannot find module 'c:\Users\srgg6701\Documents\Projects\Compilers\Webpack\try\webpack'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Function.Module.runMain (module.js:475:10)
at startup (node.js:117:18)
at node.js:951:3
Then I check installed package for node:
c:\Users\srgg6701\Documents\Projects\Compilers\Webpack\try>npm ls --depth=0
It says that's OK (?):
c:\Users\srgg6701\Documents\Projects\Compilers\Webpack\try
└── webpack#1.12.9
Nevertheless, the error remains.
Pls, tell me, can it be fixed and how?!
Just in case, here is the content of the node_modules/webpack/package.json file:
{
"name": "webpack",
"version": "1.12.9",
"author": {
"name": "Tobias Koppers #sokra"
},
"description": "Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jade, coffee, css, less, ... and your custom stuff.",
"dependencies": {
"async": "^1.3.0",
"clone": "^1.0.2",
"enhanced-resolve": "~0.9.0",
"esprima": "^2.5.0",
"interpret": "^0.6.4",
"loader-utils": "^0.2.11",
"memory-fs": "~0.3.0",
"mkdirp": "~0.5.0",
"node-libs-browser": ">= 0.4.0 <=0.6.0",
"optimist": "~0.6.0",
"supports-color": "^3.1.0",
"tapable": "~0.1.8",
"uglify-js": "~2.6.0",
"watchpack": "^0.2.1",
"webpack-core": "~0.6.0"
},
"license": "MIT",
"devDependencies": {
"benchmark": "^1.0.0",
"bundle-loader": "~0.5.0",
"codecov.io": "^0.1.2",
"coffee-loader": "~0.7.1",
"coffee-script": "^1.10.0",
"component-webpack-plugin": "~0.2.0",
"coveralls": "^2.11.2",
"css-loader": "~0.15.0",
"diff": "^2.0.2",
"eslint": "^1.1.0",
"eslint-plugin-nodeca": "^1.0.3",
"express": "~4.13.1",
"extract-text-webpack-plugin": "~0.8.0",
"file-loader": "~0.8.0",
"glob": "^5.0.14",
"i18n-webpack-plugin": "~0.2.0",
"istanbul": "^0.3.13",
"jade": "^1.11.0",
"jade-loader": "~0.7.0",
"js-beautify": "^1.5.10",
"json-loader": "~0.5.1",
"less": "^2.5.1",
"less-loader": "^2.0.0",
"mocha": "~2.2.0",
"mocha-lcov-reporter": "0.0.2",
"raw-loader": "~0.5.0",
"script-loader": "~0.6.0",
"should": "^7.0.2",
"style-loader": "~0.12.0",
"url-loader": "~0.5.0",
"val-loader": "~0.5.0",
"vm-browserify": "~0.0.0",
"webpack-dev-middleware": "^1.0.0",
"worker-loader": "~0.6.0"
},
"engines": {
"node": ">=0.6"
},
"repository": {
"type": "git",
"url": "git+https://github.com/webpack/webpack.git"
},
"homepage": "https://github.com/webpack/webpack",
"main": "lib/webpack.js",
"web": "lib/webpack.web.js",
"bin": {
"webpack": "./bin/webpack.js"
},
"files": [
"lib/",
"bin/",
"buildin/",
"hot/",
"web_modules/"
],
"scripts": {
"pretest": "npm run lint && npm run beautify-lint",
"test": "mocha",
"travis": "npm run cover -- --report lcovonly",
"lint": "eslint lib bin hot scripts",
"beautify-lint": "node ./scripts/beautify-check",
"beautify": "node ./scripts/beautify-rewrite",
"precover": "npm run lint && npm run beautify-lint",
"cover": "istanbul cover -x *.runtime.js node_modules/mocha/bin/_mocha",
"publish-patch": "npm run lint && npm run beautify-lint && mocha && npm version patch && git push && git push --tags && npm publish"
},
"gitHead": "9766f2bde3c3f3e7b3b0e914c9cb81ea3a12e823",
"bugs": {
"url": "https://github.com/webpack/webpack/issues"
},
"_id": "webpack#1.12.9",
"_shasum": "2a031d66189839cc5cbf2c68f80566da2e14ff4e",
"_from": "webpack#*",
"_npmVersion": "2.10.1",
"_nodeVersion": "0.12.4",
"_npmUser": {
"name": "sokra",
"email": "tobias.koppers#googlemail.com"
},
"maintainers": [
{
"name": "sokra",
"email": "tobias.koppers#googlemail.com"
}
],
"dist": {
"shasum": "2a031d66189839cc5cbf2c68f80566da2e14ff4e",
"tarball": "http://registry.npmjs.org/webpack/-/webpack-1.12.9.tgz"
},
"directories": {},
"_resolved": "https://registry.npmjs.org/webpack/-/webpack-1.12.9.tgz",
"readme": "ERROR: No README data found!"
}
When you install a module globally npm install -g webpack (as is required by webpack), it actually becomes available on your command line. So you just need to run:
webpack ./app.js bundle.js
As for the error which you were getting when running:
node webpack ./app.js bundle.js
that's because when you run node webpack you're actually (supposedly) passing the file webpack.js (or webpack/index.js) to node, hence the "Cannot find module" error.