I was looking at some examples in Material-UI for NextJS because I am getting the warning #material-ui/styles#4.10.0" has incorrect peer dependency "react#^16.8.0".When I searched in their repo, they suggested to use the latest version to solve the problem, and I found the following command in their json file
dependencies": { "#material-ui/core": "latest", "clsx": "latest", "next": "latest", "prop-types": "latest", "react": "latest", "react-dom": "latest" }
I have been trying to get the latest version using different commands like yarn add #material-ui/core#latest and #material-ui/core-latest but it does not work. It might be simple but I didn't find the correct syntax, so I am asking here.
How do I get the latest dependencies using the yarn commands?
Related
I have inherited an issue with prismjs whereby I have to remove/reinstall it every time I add/upgrade another package.
I have a gocd pipeline validation that fails every time I try to use dependabot to address security vulnerabilities on my repo.
Goes something like this....
dependabot generates pull request
validation fails with error "warning Lockfile has incorrect entry for "prismjs#1.24.0". Ignoring it"
Pull down master branch > upgrade package manually > remove/install prismjs#1.24.0
Generate new PR > validation succeeds and everything works fine.
Merge with master
rinse and repeat.
What I am seeing is that I have 2 entries in my yarn.lock for prismjs and removing it only removes the 1.24.0 entry AND, if I leave 1.24.0 removed the validation still fails because it cant find prismjs 1.24.0.
prismjs#1.24.0:
version "1.24.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.24.0.tgz#0409c30068a6c52c89ef7f1089b3ca4de56be2ac"
integrity sha512-SqV5GRsNqnzCL8k5dfAjCNhUrF3pR0A9lTDSCUZeh/LIshheXJEaP0hwLz2t4XHivd2J/v2HR+gRnigzeKe3cQ==
prismjs#^1.23.0, prismjs#^1.8.4, prismjs#~1.17.0:
version "1.26.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.26.0.tgz#16881b594828bb6b45296083a8cbab46b0accd47"
integrity sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==
package.json:
"dependencies": {
"comma-separated-tokens": "^1.0.0",
"elliptic": "^6.0.0",
"handlebars": "^4.1.2",
"http-proxy": "^1.17.0",
"https-proxy-agent": "^2.2.1",
"immer": "9.0.6",
"ini": "^1.3.5",
"lodash": "^4.5.1",
"markdown-to-jsx": "^6.9.1",
"merge-deep": "^3.0.2",
"nested-object-assign": "1.0.4",
"parse-headers": "^2.0.0",
"prismjs": "1.24.0",
"space-separated-tokens": "^1.0.0",
"ssri": "^6.0.1",
"tar": "4.4.19",
"tree-kill": "^1.1.0",
"ua-parser-js": "^0.7.9",
"url-parse": "^1.4.3",
"websocket-extensions": ">=0.1.1",
"y18n": "^4.0.0",
"yargs-parser": "^13.1.1"
},
"resolutions": {
"prismjs": "^1.23.0",
"property-expr": "^2.0.3"
I'm relatively new to how this versioning works and like I say I inherited this issue so I don't really have a history besides what I can see in github.
Any help would be greatly appreciated.
By Running yarn why prismjs that will explain which packages other than your project depend on prismjs.
I'm not sure if you've other packages that depend on prismjs to explain these other entries. It seems that some of the dependencies are hoisted to me. If you've a monorepo setup or work with nested packages, that could explain it.
Maybe helpful info as well, according to Yarn docs
You will receive a warning if your resolution version or range is not compatible with the original version range.
Nested packages may not work properly.
Current Behavior
I am building my angular project on circleci and it just keeps failing with the following message:
An unhandled exception occurred: Cannot find module
'#babel/compat-data/corejs3-shipped-proposals'
Require stack:
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/preset-env/lib/polyfills/corejs3/usage-plugin.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/preset-env/lib/index.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/core/lib/config/files/plugins.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/core/lib/config/files/index.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/core/lib/index.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/src/utils/process-bundle.js
/home/circleci/eleven-app/frontend/node_modules/jest-worker/build/workers/processChild.js
I am using
{
"#babel/plugin-proposal-numeric-separator": "^7.8.3",
"core-js": "3.2.1",
"tslib": "^1.11.1",
"#babel/compat-data": "~7.8.0",
"#babel/runtime-corejs3": "^7.9.2",
"ts-node": "7.0.0",
"tslint": "5.11.0",
"typescript": "3.5.3",
}
resolutions: {
"#babel/preset-env": "^7.8.7"
}
here is npx nls why #babel/preset-env output:
eleven-app-frontend > #angular-devkit/build-angular > #babel/preset-env#7.8.7
eleven-app-frontend > #nrwl/angular > #nrwl/cypress > #cypress/webpack-preprocessor > #babel/preset-env#7.9.5
eleven-app-frontend > #nrwl/cypress > #cypress/webpack-preprocessor > #babel/preset-env#7.9.5
Thank you for reading.
Had the same issue today, so I'm assuming there's something weird with the latest version.
My package.json had the following:
"#babel/compat-data": "~7.9.0"
I removed the ~ to force 7.9.0 instead of allowing newer ones and it did the trick for me.
There's probably a newer version that works but since you opened an issue for them (https://github.com/babel/babel/issues/11427) I'll just wait for more details.
I've the same issue when using TravisCI & Vue with Jest and Babel. My test suit has been failing. Adding "#babel/compat-data": "7.9.0" to devDependencies in my package.json file solved my problems.
These 3 options we came up with so far:
Adapt dependency of babel/preset-env to v7.9.0: "#babel/preset-env": "=7.9.0"
In case you use a NodeJS Docker Image, fix the version to something below 13.13, i.e.: node:13.12.0-alpine
Adding or upgrading "#babel/compat-data": "7.9.0" to devDependencies
The solutions are temporarily and should be removed as soon as there is an actual fix of the node images or the babel/preset-env library.
Linked Github issues:
babel - https://github.com/babel/babel/issues/11427
nodejs - https://github.com/nodejs/node/issues/32852#issuecomment-613652057
I had the same issue today in Github Actions build for a Vue FE project. It builds fine locally. I'm going to try the solution above and I'll report back...
Update: After looking through the package-lock file, my solution was to explicitly add "#babel/compat-data" to the prod dependencies. Previously it was only a dependency for some dev dependencies. So my package.json now looks like:
"dependencies": {
"#babel/compat-data": "^7.8.6",
...
Same issue.
Solved it by following above advices + removing node_modules (see this github thread):
Added explicitly #babel/compat-data": "7.9.0" to devDependencies
Upgraded node (13.3 to 14.0 in my case)
Had to remove my node_modules folder and re run yarn (or npm)
If you're using yarn, try to remove the yarn.lock file in your project. And then reinstall by run yarn install; you'll get a new yarn.lock file, which is fine.
It worked for me in my Next.js project.
Problem
I'm setting up eslint with eslint-config-standard.
I'm also using babel plugin that #babel/plugin-proposal-class-properties.
I tried lint my javascript files by "eslint index.js" command, and I got error that "[eslint]: Parsing error: Unexpected token =".
So i installed babel-eslint, and I updated the file ".eslintrc" like this:
{
"extends": ["standard"],
"parser": "babel-eslint",
"rules": {
"eol-last": 0
}
}
The above configuration is solved error that "[eslint]: Parsing error: Unexpected token =", but i got new problem that eslint-config-standard configuration wasn't work anymore.
Question
I want to use eslint-config-standard with experimental javascript code.
But i don't know how to use those together and whether is it possible.
How to use those together?
p.s. Sorry for my bad English :(
Yes it is possible. You just need to install a wrapper for Babel's parser used for ESLint and plugin.
https://github.com/babel/babel-eslint
https://github.com/babel/eslint-plugin-babel
$ npm install eslint babel-eslint eslint-plugin-babel --save-dev
# or
$ yarn add eslint babel-eslint eslint-plugin-babel -D
And then, inside your .eslintrc you need to add
"parser": "babel-eslint",
"plugins": ["babel"],
Also, if it doesn't work on the first try, you may need to restart your code editor. Good luck! :)
this is a part of my bower.json:
"overrides": {
"tinymce-dist": {
"main": [
"tinymce.js",
"themes/modern/theme.js",
"plugins/*/plugin.js"
]
}
},
For the reason of this Issue, I want to specify the version of tinymce-dist to 4.3.12. But how does it work? Something like adding "version": "4.3.12" doesn't work.
Thank you!
Type the command in the project root. Remove tinymce-dist first and reinstall it in version 4.3.12. Then you solve the problem.
$ bower uninstall --save tinymce-dist
$ bower install --save tinymce-dist#4.3.12
Refer to the doc,your bower.json should adds the dependency specification. The command above do the jobs for you.
"dependencies": {
"tinymce-dist": "4.3.12"
},
I am currently using ngboilerplate from: https://github.com/ngbp/ngbp
I want to include the 'ui.bootstrap.datepicker' from UI-Bootstrap (Twitter Bootstrap written natively in AngularJS). The problem is that this doesn't seem to be included in the latest version of ngboilerplate. Does anyone know how I can add this accordingly to the style of ngboilerplate.
This means that other developers can load it as a dependency with bower install.
After trying a couple of things it seems to be quite easy actually. I'll just answer this question in case someone else has the same problem.
I needed to install a new version of UI-Bootstrap. This can be done with bower by executing (on windows):
bower install angular-bootstrap
But this will give you a whole lot of other problems with dependencies.
To resolve this I use this bower.json:
{
"name": "Your-app",
"version": "0.3.1",
"devDependencies": {
"angular": "1.2.4",
"angular-mocks": "1.2.4",
"bootstrap": "3.0.3",
"angular-bootstrap": "0.10.0",
"angular-ui-utils": "0.0.3"
},
"dependencies": {
"angular-ui-router": "0.2.8-bowratic-tedium"
},
"resolutions": {
}
}
Another problem I had was that the LESS code for bootstrap isn't up to date. Instead I just included the bootstrap.css in my main.less file.