Browserlist update does nothing - create-react-app

In our Create React App, the node_modules\caniuse-lite\package.json has version 1.0.30001251. yarn build tells me that
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist#latest --update-db
But when I do this, the version in node_modules\caniuse-lite\package.json stays the same, and yarn build will request to run the browserlist update again. Our project's package.json and yarn.lock are unchanged. This is the output of npx browserslist#latest --update-db:
Latest version: 1.0.30001384
Installed version: none
Removing old caniuse-lite from lock file
Installing new caniuse-lite version
$ yarn add -W caniuse-lite
# (Warnings about peer dependencies...)
Cleaning package.json dependencies from caniuse-lite
$ yarn remove -W caniuse-lite
# (Warnings about peer dependencies...)
caniuse-lite has been successfully updated
No target browser changes
Edit: Also posted at GitHub.

Related

Why are some npm packages listed in lock-file but not the package.json file?

I ran npm audit and it's warning me to update some of the packages. However the packages its warning me about, such as chokidar, is not listed in my package.json. So what does this mean? How do I perform an update if the package is not listed in the file.
It's not listed in your package.json because it is a nested dependency.
You can update it either by trying npm audit --fix or you use the package npm-force-resolutions.
How to use npm-force-resolutions:
First add a field resolutions with the dependency version you want to fix to your package.json, for example:
"resolutions": {
"hoek": "4.2.1"
}
Then add npm-force-resolutions to the preinstall script so that it patches the package-lock file before every npm install you run:
"scripts": {
"preinstall": "npx npm-force-resolutions"
}
Now just run npm install as you would normally do:
npm install
To confirm that the right version was installed, use:
npm ls hoek
If your package-lock changes, you may need to run the steps above again.
You can check which dependency is requiring the package that appears in the lock with npm ls command.
For instance for sqlite3 you can run:
npm ls sqlite3 --json

npm ci can only install packages with an existing package-lock.json or npm-shrinkwrap.json with lockfileVersion >= 1

This is the issue that I am facing when running the command npm ci to install dependencies in my GitHub Action file.
I am working on an expo managed app and using GitHub Actions as a CI for triggering builds whenever I push my code to developmemt branch.
Here's my build script:
name: EAS PIPELINE
on:
push:
branches:
- development
workflow_dispatch:
jobs:
build:
name: Install and build
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#v2
with:
persist-credentials: false
- name: Setup Node.js
uses: actions/setup-node#v1
with:
node-version: 14.x
- name: Setup Expo
uses: expo/expo-github-action#v6
with:
expo-version: 4.x
token: ${{ secrets.EXPO_TOKEN }}
expo-cache: true
- name: Install dependencies
run: npm ci
- name: Build on EAS
run: EAS_BUILD_AUTOCOMMIT=${{1}} npx eas-cli build --platform all --non-interactive
Here's the issue that I am facing Install dependencies step.
Run npm ci
npm ci
shell: /usr/bin/bash -e {0}
env:
EXPO_TOKEN: ***
npm ERR! cipm can only install packages with an existing package-lock.json or npm-shrinkwrap.json with lockfileVersion >= 1. Run an install with npm#5 or later to generate it, then try again.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/runner/.npm/_logs/2021-10-28T15_16_06_934Z-debug.log
Error: Process completed with exit code 1.
After a lot of research, I was able to figure out that this happens when you are not using npm install for installing dependencies. In my case, I was only using yarn for the dependencies so I was only having yarn.lock file and no package-lock.json file.
One way to resolve this was using npm install to install the dependencies, then you'll have a package-lock.json file and CI won't throw any error.
And the other way if you only want to use yarn, then you need to update that step in your eas-pipeline.yml file for installing the dependencies.
*****************************************************************************************
- name: Install dependencies
run: |
if [ -e yarn.lock ]; then
yarn install --frozen-lockfile
elif [ -e package-lock.json ]; then
npm ci
else
npm i
fi
***************************************************************************************
As I wasn't able to find any solution on StackOverflow and it is our first go-to place to look for any issue. So, I decided to write this answer here.
Here's the original answer: https://github.com/facebook/docusaurus/issues/2846#issuecomment-691706184
I had a similar error.
`npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
with bunch of missing dependency name following this error.
I would run npm ci locally and it would run successfully. However, it would give me the error above when npm ci is run in the CI pipeline and in my case it was because of the version difference of the Node.js installed in the environment that Jenkins pipeline is running in.
My local Node version was 16.x and in Jenkins container it was 12.x.
Upgrading it fixed.
Old post, but I found this while searching for this same error. In my case I did have a package-lock.json file in my root directory. However, when opening it, I realized that there was a JSON syntax error that slipped in during a previous merge conflict. After running npm i again the file was fixed. The npm ERR! The 'npm ci' command can only install with an existing package-lock.json wasn't a super helpful error in that case.
This same thing happened to me, and I couldn't figure it out for the longest time. It turns out that I had legacy-peer-deps=true set globally, and I had no idea.
This caused my npm install command to alter the package-lock.json in a way that broke the build on our CI server. I reset package-lock.json with the version from master, removed that npm config, and reinstalled. Everything worked fine after that.
For the people who has this issue on AWS Amplify. You might have to run npm install and commit the package-lock.json file, then deploy again.
If you're using pnpm, you install node dependencies via this step:
- name: Install Node.js dependencies
run: |
npm i -g pnpm
pnpm i
After battling with this issue for about 2 days, It's finally deploying successfully to Firebase Functions after deleting package-lock.json from both the src and src/functions folders.
This occurred because the package lock file was not generated with npm, despite the fact that the npm ci requires npm to install the packages.
And because npm requires package-lock.json, we get this error. To fix this error for GitHub actions, this what I did:
- run: yarn install --frozen-lockfile
- run: yarn lint
- run: yarn test:ci
Commit diff:
deleting deploy.json helped me, since the token is updated when overwritten
rm ~/.config/configstore/#vkontakte/vk-miniapps-deploy.json
but I have other services
This happens sometimes because of the version difference of the Node.js installed in the environment that the pipeline is running in.
To fixe this, I ran:
$ firebase init hosting:github
then type Y to set up workflow when asked to.
finally, add "npm i" as one of the scripts to run before deploying like this:
npm i && npm ci && npm run build
I was using npm package manager and migrated to yarn package manager removing package-lock.json file.
I had this configuration in my .circleci/config.yml file
- node/install-packages
changed to
- node/install-packages:
pkg-manager: yarn
In my case the problem were some 'extraneous' packages, concretely local path dependencies. After removing them from package.json the problem was solved.
I got the error message while running npm install instead of npm ci.
On package.json I change this :
"overrides": {
"trim-newlines": "^3.0.1"
},
to : `
"overrides": {
"trim-newlines": "^1.0.0"
}
`
That Work for me successfully.
I had a similar problem deploying to heroku. I simply deleted the existing package-lock.json file and then ran
npm install
Merging the new lock file fixed the deploy.
In my case, I had this error with npm ci while using Yarn. I eventually figured out the version of Node I was using wasn't supported.
I did the following:
node -v to confirm my node version (18.0.1)
nvm use 16.13.0
Delete the node_modules directory
Delete yarn.lock
Run yarn
Run yard add + package names
After this, the error no longer occurred and the app deployed correctly.

npm - tarball data for material-design-icons seems to be corrupted

I'm having this error while running a npm install material-design-icons#3.0.1:
tarball data for material-design-icons#3.0.1 (sha1-mnHEh0chjrylHlGmbaaCA4zct78=) seems to be corrupted
npm ERR! path D:\speech-analytics\node_modules\.staging\material-design-icons-7d5a1f73\action\drawable-xxhdpi\ic_assignment_ind_white_48dp.png
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink
npm ERR! Error: EPERM: operation not permitted, unlink 'D:\\speech-analytics\node_modules\.staging\material-design-icons-7d5a1f73\action\drawable-xxhdpi\ic_assignment_ind_white_48dp.png'
npm ERR! { Error: EPERM: operation not permitted, unlink 'D:\\speech-analytics\node_modules\.staging\material-design-icons-7d5a1f73\action\drawable-xxhdpi\ic_assignment_ind_white_48dp.png'
Here it's documented as a bug, but still without an answer nor a fix.
I've tried to reinstall node, upgraded to latest npm version (currently running 6.4.1), did a cache clean --force, tried a npm install --no-optional, removed package-lock.json, removed npm & npm-cache folders from AppData directory, running everything as Administrator, but still no luck.
I even tried with material-design-icons#3.0.0 but the error remains.
If I navigate to the folder that appears in the log (node_modules\.staging\material-design-icons-7d5a1f73\action\drawable-xxhdpi), it's empty, and is the only folder that exists in the entire node_modules directory. I can delete that dir without any problems, so it does not seem to be a permissions/lock issue.
Any suggestions?
Finally, I got this fixed by:
Removing node_modules folder
Running npm update
Running npm install
As far I understand, the npm update should have updated the package.json file, but all dependencies kept the same versions as we had it before.
I resolved this with the command: npm cache verify which output:
Cache verified and compressed (C:\Programs\DCPS\npm-cache\_cacache):
Content verified: 1344 (164824963 bytes)
Content garbage-collected: 1 (3491551 bytes)
Index entries: 1522
Finished in 8.187s
The line that stands out to me is: Content garbage-collected: 1 (3491551 bytes)
Does this sort of thing happen because a new version of a package is published to npmjs without a version bump?
No need to run npm update (I didn't want to update any packages) or delete the entire node_modules folder. I solved this by
deleting package-lock.json
deleting node_modules\material-design-icons-xxxxxxx
running npm install again
If npm update is not a solution, and as deleting package-lock.json can bring issues of its own, I could solve it simply by:
deleting the node_modules/ folder
in package-lock.json, deleting the sections referencing to the corrupted package
running npm install again
If you are on windows env, I fixed it by running the cmd as administrator
You need to confirm whether the Typescript is installed and after installing typescript it worked for me
running the below comment will show the typescript version
tsc -v
If it shows some error install the typescript
npm install -g typescript
If then typescript is installed you can try checking the Angular Cli version
ng --version
If it shows some error then install Angular Cli Ref: https://cli.angular.io/
npm install -g #angular/cli
" If you are on windows env, I fixed it by running the cmd as administrator "
This worked for me. However, chromedriver was not installed. So, i installed it separately using the command 'npm install chromedriver'.
None of the answers solved my problem, because in my case was the git. Maybe someone can have the same problem.
I had some dependencies from git in the project and my git was not working on the terminal. So fixing the path for git fixed it!
I had this in Bitbucket Pipeline when using a private package.
I was missing to install git in pipeline:
script:
- apk update && apk upgrade && apk add --no-cache bash git openssh # <- THIS
- npm ci --prefer-offline
Dependency was
"some-private-package": "git+ssh://git#bitbucket.org/workspace/some-private-package#v1.0.12",`
Well I could not resolve this problem with a lot of tries so I made the download of the github ZIP, unzip and install and it worked !
download material-design-icons from github
unzip to the directory of your project (or c:\tmp)
npm install ./material-design-icons
or
npm install c:/tmp/material-design-icons

Unable to resolve module `#babel/runtime/helpers/interopRequireDefault`

When creating a new react native project using the standard react-native init MyApp and running react-native run-ios for the first time I'm seeing the following error
error: bundling failed: Error: Unable to resolve module `#babel/runtime/helpers/interopRequireDefault` from `/Users/chrisedgington/Development/ReactNative/SixNationsPredictor/index.js`: Module `#babel/runtime/helpers/interopRequireDefault` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
at ModuleResolver.resolveDependency (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:1301)
at ResolutionRequest.resolveDependency (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)
at DependencyGraph.resolveDependency (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/node-haste/DependencyGraph.js:238:485)
at Object.resolve (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/lib/transformHelpers.js:180:25)
at dependencies.map.result (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:311:29)
at Array.map (<anonymous>)
at resolveDependencies (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:307:16)
at /Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:164:33
at Generator.next (<anonymous>)
at step (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:266:307)
I've tried running the suggested but still see the same issue. I've seen a few posts about similar issues but nothing specifically seems to say how to resolve the problem in react-native.
macOS: 10.13.6
node: 8.11.3
react-native-cli: 2.0.1
react-native: 0.57.1
Have a go and try:
npm add #babel/runtime
Or upgrade babel runtime:
"#babel/runtime": "7.0.0-beta.55"
I tried all the things mentioned above, and, I found myself here again tonight.
Running from a nrwl mono repo, I had to cd into the app that was having the problem and run.
jest --clearCache
You should first quit the metro terminal before executing
npm add #babel/runtime
npm install
You should add and install babel for your projects
npm add #babel/runtime
npm install
If The error is not fixed, Try:
npm start --reset-cache
The issue for me was that #babel/runtime was installed as a dev-dependency instead of just a normal (non-dev) dependency
Try to update your npm version first
npm update -g npm#version or sudo npm -gf update npm#version
and then just add the babel runtime at your react native project
npm add #babel/runtime
Try upgrading your packages. You could have an old package causing the problem:
yarn upgrade-interactive --latest
Current error message suggests these steps to fix this:
Clear watchman watches: watchman watch-del-all
Delete node_modules: rm -rf node_modules and run yarn install
Reset Metro's cache: yarn start --reset-cache
Remove the cache: rm -rf /tmp/metro-*
The last one solved it for me.
I had this problem today (April 2021), and I could solve it only by removing the webpack-node-externals package from my webpack configuration.
For me the solution was (Mac):
Stop IntelliJ
Enter terminal
Run: npx browserslist#latest --update-db -g
Run: npm cache verify
Start IntelliJ
If still not working:
Delete node_modules fron project if exists
Run: npm cache verify
Run npm install -f in project
Run: npx browserslist#latest --update-db -g
Problem:
I was in the middle of upgrading flow to typescript and I used #khanacademy/flow-to-ts to convert js files to ts. the lib not only changed the js files of the app but also it converted all js files in node_modules directory.
Solution:
I had to remove the node_modules and npm -i. This time when I checked the node_modules the interopRequireDefault.js file was there.
In case you are working with Yarn workspaces please note you are running react-native start from the right project...
Install latest Babel/runtime
=> install #babel/runtime
After that clean or reset the cache
=> npm start -- --reset-cache after
or
npm cache clean --force
I accidentally deleted my node_modules and package-lock.json. I used npm i to regenerate them and suddenly I was getting the above error. I solved it in two ways.
By uninstalling the app and using the following commands.
npx jest --clearCache
npm update
npm i
npx react-native run-android
By deleting the local repository and re-cloning it.
Hope this helps you.
I just uninstalled watchman. It worked for me.
brew uninstall watchman
Someone may find this helpful. I had the same problem while using turborepo and Expo.
Resolved it by adding 'node-linker=hoisted' to .npmrc.
Had this issue none of the above listed solutions worked for me, I had to go to node_modules/jest-haste-map/build/index.js
changed const crawl = canUseWatchman && this._options.useWatchman ? _watchman.default : _node.default;
to const crawl = canUseWatchman && this._options.useWatchman ? _node.default : _node.default;

NPM Cannot read property '0' of undefined

After updated Node (upto v8.6.0) and npm (upto v5.5.1) I cannot execute command npm install.
After npm install I've error message:
npm ERR! Cannot read property '0' of undefined
What's trouble or I need downgrade node/npm ?
I had the same problem.
I removed both node_modules and package-lock.json and then did:
npm install
And it worked.
Edit by #OwlyMoly
Due to new updates and the restriction to old dependencies in package-lock.json is causing this conflicts. By doing npm install won't fix this issue. Instead by ditching npm_modules and package-lock.json and doing npm install will load a new node_modules and that supposed to be required by package.json. You have to commit the new package-lock.json along with your latest changes of the project.
Do 2 steps bellow (Window):
rm -rf ./node_modules to remove node folder
rm package-lock.json to remove package-lock.json file
then npm install to re-install the node modules
Just download and install latest Yarn which is also a node package manager, developed by facebook, but has a much better dependency management. Also update your node cli (optional).
And then, install your dependencies using yarn:
yarn install
or
yarn // short version of yarn install
No errors!
You can continue to use npm after you have installed all dependencies with yarn or continue with yarn....it's your choice.
I've made some tests:
nodejs#8.6.0 npm#5.5.1 - I have trouble and the test fails
nvm use 8.5.0
nodejs#8.5.0 npm#5.5.1 - I have trouble and the test fails
nvm use 8.4.0
nodejs#8.4.0 npm#5.5.1 - I have trouble and the test fails
npm install npm#^5 -g
nodejs#8.4.0 npm#5.4.2 - I have trouble and the test fails
nvm use 8.6.0
npm install npm#^4 -g
nodejs#8.6.0 npm#4.6.1 - no trouble, this fixes it.
Seems to be an issue with a combination of factors.
Some workarounds here:
https://github.com/npm/npm/issues/18238
npm 5.3.0 is broken for windows 10 after upgrading the nodeJS.
You should downgrade the npm, it is a temporary solution but works fine.
npm install -g npm#5.2.0
For me (npm#6.9.0) solved the issue by deleting node_modules and performing npm install, but without removing package.json.lock file.
Just remove both node_modules and package-lock.json and run: npm install
or
Just run: npm install -g npm#latest to upgrade it to the latest version
Try with nvm(Node Version Manager).it help you to install any node version for any project without any Error.
I found same problem when using npm version 5.5.1 to install babel-preset-stage-0
Solution:
I downgraded npm to version 5.2.0 and try to install again then it can solve the issue.
npm i -g npm#5.2.0
npm i -D babel-preset-stage-0
I bumped into this issue using nvs (Node Version Switcher - https://github.com/jasongin/nvs) node#10.15.3 and npm#6.9.0. The reason was a local package I had linked with npm link. The solution was to remove that folder.
In my case reinstalling node_modules have not fixed this issue.
Problem was with one *.ts file which was missing in source codes.
Do not know why It was not displaying compilation error, but adding this missing file to repository solved this issue.
Upgrading npm to version 7.5.4 did the job for me.
npm install -g npm#latest
What worked for me:
npm ci
Install a project with a clean slate
docs: https://docs.npmjs.com/cli/v7/commands/npm-ci
Deletes node_modules and installs everything based on package-lock.json, so no need to regenerate that