after I installed vue.js on my laravel project and running npm run dev this error comes out.
I was having the same problem, basically what was happening is that my version of VUE did not match the version of vue-loader and vue-template-compiler
To solve it I just had to match the versions in package.json and npm install
here are the versions I'm using
"vue": "^2.6.11",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12",
"laravel-mix": "^6.0.6",
My issue arose after running php artisan ui vue --auth. What happened is that this command added vue v2 as a dev dependency in my package.json, while I had already installed vue 3.
Running npm install installed the version 2 vue, which led to a version mismatch with vue-loader and vue-template-compiler.
I solved the issue by getting rid of the added vue 2 dependency, and running npm install again.
The project uses node-sass but I'd like to switch to dart-sass since node-sass is deprecated.
If I uninstall node-sass and install sass I get the following error:
To import Sass files, you first need to install node-sass. Run 'npm install node-sass' or 'yarn add node-sass' inside your workspace
In case I uninstall node-sass and install sass in node-sass wrapper (npm install --save-dev node-sass#npm:sass) the project compiles successfully. What is the way to get it to work with pure sass installed?
So the goal is to have "sass": "^1.38.0" in the devDependencies instead of "node-sass": "npm:sass#^1.38.0"
Upgrade of sass-loader to 7.3.1 helped to fix it. So the devDependencies are:
"sass": "^1.38.0",
"sass-loader": "^7.3.1"
When and how can we upgrade the dependencies that create-react-app adds to package.json?
Today I ran npx create-react-app my-app --template typescript and it added these dependencies:
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/jest": "^24.0.0",
"#types/node": "^12.0.0",
"#types/react": "^16.9.0",
"#types/react-dom": "^16.9.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"typescript": "~3.7.2"
}
Even though some have newer versions available:
"#testing-library/jest-dom": "^5.11.4"
"#testing-library/react": "^11.0.4"
"#testing-library/user-event": "^12.1.6"
"typescript": "~4.0.3"
Can we upgrade any dependency at any time or are they tied to the specific version of react-scripts? If it is the latter how do we know when to upgrade and what version to upgrade to?
When?
I'm still figuring that out, but maybe when a dependency (e.g. #testing-library/user-event) strongly recommends updating.
and how
Here is a walkthrough of how to update dependencies. Your mileage may vary. I recommend testing each change before moving to the next. Some dependencies may need to go together.
I recently (2022) ran npx create-react-app my-app --template typescript and analyzing the dependencies with npm outdated for me shows:
Package Current Wanted Latest
#testing-library/user-event 13.5.0 13.5.0 14.4.3
#types/jest 28.1.8 28.1.8 29.1.2
#types/node 18.7.14 18.8.3 18.8.3
web-vitals 2.1.4 2.1.4 3.0.3
Major version upgrades:
You can see that #testing-library/user-event does not "want" a higher version, but a higher MAJOR version does exist.
In order to upgrade major versions, which in theory does not happen as frequently as minor versions, I use a brute force method which involves npm uninstall <package-name> and then npm install <package-name>.
For package #testing-library/user-event,
# show the version installed
npm list | grep '#testing-library/user-event'
npm uninstall -D #testing-library/user-event
npm list | grep '#testing-library/user-event'
npm uninstall -D #testing-library/user-event
npm list | grep '#testing-library/user-event'
The following is printed for the above commands
├── #testing-library/user-event#13.5.0
├── #testing-library/user-event#14.4.3
Executing npm outdated again shows #testing-library/user-event is omitted. Success!
Package Current Wanted Latest
#types/jest 28.1.8 28.1.8 29.1.2
#types/node 18.7.14 18.8.3 18.8.3
web-vitals 2.1.4 2.1.4 3.0.3
Minor version upgrades:
Updating a package to a higher minor version can be accomplished using npm update.
You can see that #types/node has a higher MINOR version available that npm outdated marks as Wanted. You can upgrade any single package wanting a MINOR upgrade by saying npm update <package-name>, or ALL packages wanting a minor upgrade by omitting the package name, e.g. npm update
For upgrading only package #types/node,
npm update #types/node
npm outdated
Running the commands above show #types/node is no longer "Wanted" to upgrade, visible in the following output. Success!
Package Current Wanted Latest
#types/jest 28.1.8 28.1.8 29.1.2
web-vitals 2.1.4 2.1.4 3.0.3
I have a react-native project and tried to upgrade version of react-navigation-stack and installed all missed libraries, but then I downgraded back and now I have error
error: bundling failed: Error: Unable to resolve module `./vendor/index` from `node_modules/react-navigation-stack/lib/module/index.js`:
I have tried to remove node-modules and reinstall it, it doesn't work...
What can I do?
"react-navigation": "4.0.10",
"react-navigation-redux-helpers": "4.0.1",
"react-navigation-stack": "1.10.3",
You need to clear you bundler cache: https://reactnavigation.org/docs/en/troubleshooting.html#im-getting-an-error-unable-to-resolve-module-after-updating-to-the-latest-version
Error
Could not find the implementation for builder #angular-devkit/build-angular:dev-server
ng serve
Could not find the implementation for builder #angular-devkit/build-angular:dev-server
Error: Could not find the implementation for builder #angular-devkit/build-angular:dev-server
at WorkspaceNodeModulesArchitectHost.resolveBuilder (D:\angular-tour-of-heroes\node_modules\#angular\cli\node_modules\#angular-devkit\architect\node\node-modules-architect-host.js:49:19)
at ServeCommand.initialize (D:\angular-tour-of-heroes\node_modules\#angular\cli\models\architect-command.js:135:55)
at async ServeCommand.validateAndRun (D:\angular-tour-of-heroes\node_modules\#angular\cli\models\command.js:127:9)
at async Object.runCommand (D:\angular-tour-of-heroes\node_modules\#angular\cli\models\command-runner.js:178:24)
at async default_1 (D:\angular-tour-of-heroes\node_modules\#angular\cli\lib\cli\index.js:32:31)
ng version
Angular CLI: 8.0.3
Node: 12.4.0
OS: win32 x64
Angular: 7.2.2
... animations, cdk, common, compiler, core, forms, http
... platform-browser, platform-browser-dynamic, router
... service-worker
Package Version
-----------------------------------------------------------
#angular-devkit/architect 0.13.9
#angular-devkit/build-angular 0.13.9
#angular-devkit/build-optimizer 0.13.9
#angular-devkit/build-webpack 0.13.9
#angular-devkit/core 8.0.3
#angular-devkit/schematics 8.0.3
#angular/cli 8.0.3
#angular/compiler-cli 7.2.15
#angular/language-service 7.2.15
#angular/material 7.3.7
#angular/pwa 0.800.3
#ngtools/webpack 7.3.9
#schematics/angular 8.0.3
#schematics/update 0.13.9
rxjs 6.3.3
typescript 3.2.4
webpack 4.29.0
Package Json
{
"name": "angular-tour-of-heroes",
"version": "0.0.0",
"license": "MIT",
"private": true,
"dependencies": {
"#angular/animations": "7.2.2",
"#angular/cdk": "~7.2.2",
"#angular/common": "7.2.2",
"#angular/compiler": "7.2.2",
"#angular/core": "7.2.2",
"#angular/forms": "7.2.2",
"#angular/http": "7.2.2",
"#angular/material": "^7.2.2",
"#angular/platform-browser": "7.2.2",
"#angular/platform-browser-dynamic": "7.2.2",
"#angular/pwa": "^0.800.3",
"#angular/router": "7.2.2",
"#angular/service-worker": "7.2.2",
"angular-datatables": "^7.0.0",
"angular-in-memory-web-api": "0.8.0",
"angular2-datatable": "^0.6.0",
"bootstrap": "^4.3.1",
"core-js": "2.6.3",
"datatables.net": "^1.10.19",
"datatables.net-buttons": "^1.5.6",
"datatables.net-buttons-dt": "^1.5.6",
"datatables.net-dt": "^1.10.19",
"hammerjs": "^2.0.8",
"jasmine-core": "3.3.0",
"jasmine-marbles": "0.4.1",
"jquery": "^3.4.1",
"jszip": "^3.2.1",
"ng-select2": "^1.0.8",
"ng2-select2": "^1.0.0-beta.16",
"ngx-bootstrap": "^3.2.0",
"rxjs": "6.3.3",
"rxjs-compat": "^6.3.3",
"select2": "^4.0.6-rc.1",
"tslib": "^1.9.0",
"web-animations-js": "2.3.1",
"zone.js": "0.8.29"
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.13.9",
"#angular-devkit/core": "^8.0.3",
"#angular/cli": "^8.0.3",
"#angular/compiler-cli": "^7.2.7",
"#angular/language-service": "~7.2.2",
"#types/datatables.net": "^1.10.15",
"#types/datatables.net-buttons": "^1.4.1",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "^2.0.6",
"#types/jquery": "^3.3.29",
"#types/node": "~10.12.18",
"codelyzer": "~4.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.0.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "^2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~8.0.1",
"tslint": "~5.12.1",
"typescript": "~3.2.4"
}
}
Solution i have tried
remove node_module,package-lock.json
npm install --save-dev #angular-devkit/build-angular
npm install
npm update
npm install -g typescript#latest
i tried to update
PS D:\angular-tour-of-heroes> ng update
Using package manager: 'npm'
Collecting installed dependencies...
Found 58 dependencies.
We analyzed your package.json, there are some packages to update:
Name Version Command to update
--------------------------------------------------------------------------------
#angular/cdk 7.2.2 -> 8.0.1 ng update #angular/cdk
#angular/core 7.2.15 -> 8.0.1 ng update #angular/core
#angular/core 7.2.2 -> 7.2.15 ng update #angular/core
#angular/material 7.3.7 -> 8.0.1 ng update #angular/material
rxjs 6.3.3 -> 6.5.2 ng update rxjs
There might be additional packages that are outdated.
Run "ng update --all" to try to update all at the same time.
PS D:\angular-tour-of-heroes> ng update #angular/cdk
Repository is not clean. Please commit or stash any changes before updating.
npm cache verify
I have tried to Update Node/Npm version
node -v
v12.4.0
npm -v
6.9.0
I have also followed link Could not find module "#angular-devkit/build-angular"
Angular Guide for upgrade
https://update.angular.io/#7.0:8.0
D:\angular-tour-of-heroes> ng update #angular/cli #angular/core
Repository is not clean. Please commit or stash any changes before updating.
After fixing git issue
PS D:\angular-tour-of-heroes> ng update --all
Using package manager: 'npm'
Collecting installed dependencies...
Found 58 dependencies.
Package "#angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2")
Package "#angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.5", would install "3.5.2")
Package "angular2-datatable" has an incompatible peer dependency to "#angular/common" (requires "^2.0.0" (extended), would install "8.0.1").
Package "#angular/http" has an incompatible peer dependency to "#angular/core" (requires "7.2.15", would install "8.0.1")
Package "angular2-datatable" has an incompatible peer dependency to "#angular/core" (requires "^2.0.0" (extended), would install "8.0.1").
Package "angular2-datatable" has an incompatible peer dependency to "#angular/platform-browser" (requires "^2.0.0" (extended), would install "8.0.1").
Package "#angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2").
Package "angular2-datatable" has an incompatible peer dependency to "rxjs" (requires "^5.0.0-beta.12", would install "6.5.2").
Incompatible peer dependencies found. See above
After trying all solution still cannot run ng serve in cli.
any help is most welcome
Solution
After upgrading to Angular 8
problem may occur
ng update --all
Using package manager: 'npm'
Collecting installed dependencies...
Found 58 dependencies.
Package "#angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2")
Package "#angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.5", would install "3.5.2")
Package "angular2-datatable" has an incompatible peer dependency to "#angular/common" (requires "^2.0.0" (extended), would install "8.0.1").
Package "#angular/http" has an incompatible peer dependency to "#angular/core" (requires "7.2.15", would install "8.0.1")
Package "angular2-datatable" has an incompatible peer dependency to "#angular/core" (requires "^2.0.0" (extended), would install "8.0.1").
Package "angular2-datatable" has an incompatible peer dependency to "#angular/platform-browser" (requires "^2.0.0" (extended), would install "8.0.1").
Package "#angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2").
Package "angular2-datatable" has an incompatible peer dependency to "rxjs" (requires "^5.0.0-beta.12", would install "6.5.2").
Incompatible peer dependencies found. See above
Solution for these error
ng update --all --force
Then error
ERROR in The Angular Compiler requires TypeScript >=3.4.0 and <3.5.0 but 3.5.2 was found instead.
npm install typescript#">=3.4.0 <3.5.0" --save-dev --save-exact
Just to be sure run the following steps:
npm uninstall -g #angular/cli
npm cache verify
npm install -g #angular/cli#latest
Then in your Local project package:
rm -rf node_modules dist
npm install --save-dev #angular/cli#latest
npm i
ng update #angular/cli
ng update #angular/core
will fix the issue
Here's what finally worked for me, from my project folder
nvm use 10.14.1
rm -rf node_modules dist
npm install --save-dev #angular/cli#latest
ng update --all --force --allow-dirty
npm install --save zone.js#0.9.1
You may have to resolve other dependencies, depending on the packages used by your application.