[Update]
Vue complier 2.6.12 triggers this error when I try in npm clean-install
tarball tarball data for vue-template-compiler#2.6.12 (sha512-KIq15bxxxxxx) seems to be
corrupted. Trying one more time.
I run npm cache clean --force then change both versions to 2.6.11 but Vue changes its version automatically to 2.6.12 and can't get it working
I have been trying to install VueJs to a current Laravel 7 project. I reach this command
npm install && npm run dev
I got a warning of mismatch between Vue and the template compiler so I changed the package.json to make them both the same version
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12"
And changed their version in package-lock.json too.
then I deleted node_modules folder then run npm install again. I got multiple errors so I kept running the same command multiple times till it finished installing. Now I'm trying to run npm run dev but I get this error
errno ENOENT
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js
--progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! spawn ENOENT
How to fix it and make the application work with VueJs?
Have you tried prefixing cross-env calls in package.json with npx cross-env?
For example,
// OLD
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
// NEW
"development": "npx cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
Related
npx create-react-app my-project results in the following dependency errors:
npx version: 8.5.0
Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react-18#0.1.0
npm ERR! Found: react#18.0.0
npm ERR! node_modules/react
npm ERR! react#"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"<18.0.0" from #testing-library/react#12.1.5
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^12.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
The command still produces a project directory, but running npm start in the created directory errors with web-vitals missing from node-modules.
Solutions tried
Running the same command with --force or --legacy-peer-deps as suggested by the above error message doesn't solve the problem.
Deleting node_modules and package-lock.json and running npm i also doesn't solve the problem.
Update
The problem has been fixed with the latest update of create-react-app. Now it creates a project without any problem.
Until this is fixed for now you can delete the node_modules folder and package-lock.json. Next, open package.json and change
"react": "^18.0.0" & "react-dom": "^18.0.0" to an earlier version e.g:
"react": "^17.0.2" & "react-dom": "^17.0.2".
Finally, you can run npm install.
Alternative Solution (Try this first!):
solution suggested by joooni1998):
delete both node_modules and package-lock.json
run npm i web-vitals --save-dev
run npm install
and then you can use npm run build and npm start again
Check here for the Github issue.
Here is a temporary workaround:
Install cra-template to a separate folder (other than your new
project app's folder) using "npm install cra-template"
Go to the installed cra-template package folder and in file "template.json" change the line '"#testing-library/react": "^12.0.0"' to '"#testing-library/react": "^13.0.0"'
Go back to your root folder and run npx create-react-app my-app (your app name) --template file:PATH_TO_YOUR_CUSTOM_TEMPLATE
Additionally, you can let the build fail, remove the node_modules folder as well as the package-json.lock file. Open the package.json file and change the react and react-dom to an earlier version.
For example:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template": "1.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
Delete reportWebVitals.js
Remove import reportWebVitals from './reportWebVitals'; from index.js
Remove reportWebVitals(); from the bottom of index.js
Finally run npm install
It worked for me by deleting both 'node_modules' folder and 'package-lock.json' file. Then, I changed both react and react-dom version to 17.0.2 instead of 18.0.0 inside the package.json file as suggested by Gavriel's answer https://stackoverflow.com/a/71836018/12490294. Then, inside the app folder, I ran
npm i web-vitals --save-dev
Then
npm start
The app started successfully
Or you can try this npx --legacy-peer-deps create-react-app my-appname or goto index.js and remove the usage of web vitals
or downgrade npm with npm install -g npm#8.3.0 and create react app.
You could use yarn add create-react-app your-app instead
Try running either with --force or with --legacy-peer-deps, both will install dependencies without problems.
If that doesn't work, then delete the node modules folder and start installing from scratch
Given a package.json that includes the following scripts:
"scripts": {
"dev": "npm install && webpack-dev-server --hot --progress --colors",
"build": "npm install && webpack --env.prod --progress --colors",
"start": "npm run dev"
}
Running npm start gives me many errors of the sort
`npm WARN tar ENOENT: no such file or directory, open 'C:\repos\my-project\node_modules\.staging\core-js-ea8988d1\client\shim.js'
followed by
npm ERR! code 1
npm ERR! Command failed: git submodule update -q --init --recursive
npm ERR! C:/Users/JohnDoe/AppData/Local/Programs/Git/mingw64/libexec/git-core\git-submodule: line 21: .: git-sh-setup: file not found
However, if instead I just run npm install directly, the npm installation of packages succeeds with no errors, and then I can run npm start thereafter with no issues. Why is this? There seems to be some kind of issue with including npm install in an npm script if the packages are not yet installed. I also tried setting start to "npm install" but running npm start gave me the same errors in that case.
When I tried to run npm run dev in my nuxt project, my console returned this message:
'nuxt' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! andromeda#1.0.0 dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the andromeda#1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I solved this problem.
I was looking in stackoverflow for similar problems and apparently the problem was the npm cache.
I will let a link bellow with the solution and a quick sample of what i did.
Link to the answer:
npm ERR! code ELIFECYCLE
Step 1: npm cache clean --force
Step 2: Delete node_modules by $ rm -rf node_modules folder or delete
it manually by going into the directory and right-click > delete.
Delete package-lock.json file too.
Step 3: npm install
To start again, npm start
Thanks everyone who take time to help, really appreciate.
Make sure nuxt is installed in your Nuxt project:
$ cd /path/to/nuxt-project
$ npm list nuxt
nuxt-project#1.0.0 /path/to/nuxt-project
└── nuxt#2.6.3
Here /path/to/nuxt-project contains your package.json and node-modules.
If it isn't installed, add nuxt to your project by doing:
$ npm install --save nuxt
Or put it in your project's package.json then do npm install:
"dependencies": {
"nuxt": "^2.0.0"
},
UPDATE:
If you are still getting "nuxt not recognized" problems, try to use explicit path to nuxt from your node_modules directory.
Given this directory (after doing npm install --save nuxt):
nuxt-project
|- node_modules
|- .bin
|- nuxt
|- package.json
Update the dev command in package.json with:
"scripts": {
"dev": "node_modules/.bin/nuxt"
},
Sometimes this blows up because you're not exporting node_modules/.bin directory.
Place or append the following line in your .bashrc or .zshrc:
export PATH=node_modules/.bin:$PATH
Have the same problem recently.
Solution for me was change the path of scripts section in package.json from this:
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
to that:
"scripts": {
"dev": "node_modules/.bin/nuxt",
"build": "node_modules/.bin/nuxt build",
"start": "node_modules/.bin/nuxt start",
"generate": "node_modules/.bin/nuxt generate"
},
Step 1: rm -rf node_modules package-lock.json
Step 2: npm cache clean --force
Step 3: npm install ( you may need to add --legacy-peer-deps or --force flag, if npm install is not working )
To start again, npm start
To make build, npm run build (ssr ) or generate ( csr )
Install globally cross-env:
npm install -g cross-env
Then just update package.json scripts to start with "cross-env ...."
example:
"scripts": {
"dev": "cross-env nuxt",
"build": "cross-env nuxt build",
"start": "cross-env nuxt start",
"generate": "cross-env nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
},
This works on my Windows 10.
It simply means nuxt is not installed.
Try running npm install nuxt
Using codeship to deploy to aws. Got error like
npm ERR! missing script: stg
custom script
git clone https://${GITHUB_KEY}#github.com/me/myproject.git
ls
cd myproject
composer install --no-interaction --prefer-dist
nvm install 6.9.4
npm install sync-exec
npm install
npm rebuild node-sass
npm run stg
partial webpack
"scripts": {
"clean": "rimraf public/dist",
"watch": "webpack --config webpack.dev.config.js --watch --progress",
"dev": "webpack --config webpack.dev.config.js --progress",
"prod": "cross-env npm run clean && NODE_ENV=production webpack --config webpack.config.js --progress --profile --colors",
"stg": "cross-env npm run clean && NODE_ENV=stage webpack --config webpack.dev.config.js --progress --profile --colors",
"lint": "eslint ./app/**/**.js"
},
codeship error
npm run stgnpm ERR! Linux 4.15.0-1009-aws
npm ERR! argv "/home/rof/.nvm/versions/node/v6.9.4/bin/node" "/home/rof/.nvm/versions/node/v6.9.4/bin/npm" "run" "stg"
npm ERR! node v6.9.4
npm ERR! npm v3.10.10
npm ERR! missing script: stg
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! /home/rof/src/github.com/myaccountname/myproject/myproject/npm-debug.log
In the vue-cli, I want to npm run dev, but get the bellow error:
$ npm run dev
> vuejs-playlist#1.0.0 dev /Users/den/Desktop/Test/vue/vuejs-playlist
> cross-env NODE_ENV=development webpack-dev-server --open --hot
sh: cross-env: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! vuejs-playlist#1.0.0 dev: `cross-env NODE_ENV=development webpack-dev-server --open --hot`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the vuejs-playlist#1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/den/.npm/_logs/2018-02-02T11_54_11_067Z-debug.log
Try as follows for #vue/cli
npm run serve
In your traceback:
Local package.json exists, but node_modules missing, did you mean to install?
You should in your project root directory install the dependencies:
npm install
Or use its logogram npm i
As both answers before stated your build failed due needing to first:
npm install
Once that is complete, check your package.json file.
In there will have the default options for npm run followed by your build script option.
Example:
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
}
Resulting in your npm run serve is the same as vue-cli-service serve
Reference: Vue Docs