CODEWITHSUNDEEP
node.jsangularionic-frameworknpm
sekthor
sekthor

Reputation: 504

Ionic start fails because of dependency issue

I just installed Ionic with

npm install -g @ionic/cli

When I try to run

ionic start ionic-test-app

the initialization fails with a npm dependency error. Something about a wrong version of a package called postcss.

$ ionic start ionic-test-app

Pick a framework! šŸ˜

Please select the JavaScript framework to use for your new app. To bypass this prompt next time,
supply a value for the --type option.

? Framework: Angular

Let's pick the perfect starter template! šŸ’Ŗ

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your
app. To bypass this prompt next time, supply template, the second argument to ionic start.

? Starter template: blank
? ./ionic-test-app exists. Overwrite? Yes
āœ” Preparing directory ./ionic-test-app in 6.79ms
āœ” Downloading and extracting blank starter in 188.52ms
? Integrate your new app with Capacitor to target native iOS and Android? Yes
> ionic integrations enable capacitor --quiet -- ionic-test-app io.ionic.starter
> npm i --save -E @capacitor/core@latest
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/postcss
npm ERR!   postcss@"8.2.14" from @angular-devkit/[email protected]
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~0.1102.4" from the root project
npm ERR!     peer @angular-devkit/build-angular@"^0.1102.4" from @ionic/[email protected]
npm ERR!     node_modules/@ionic/angular-toolkit
npm ERR!       dev @ionic/angular-toolkit@"^3.1.1" from the root project
npm ERR!   peer postcss@"^8.1.0" from [email protected]
npm ERR!   node_modules/autoprefixer
npm ERR!     autoprefixer@"10.2.4" from @angular-devkit/[email protected]
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~0.1102.4" from the root project
npm ERR!       1 more (@ionic/angular-toolkit)
npm ERR!   9 more (css-loader, cssnano, postcss-import, postcss-loader, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer postcss@"^8.2.15" from [email protected]
npm ERR! node_modules/cssnano/node_modules/cssnano-preset-default
npm ERR!   cssnano-preset-default@"^5.0.1" from [email protected]
npm ERR!   node_modules/cssnano
npm ERR!     cssnano@"5.0.2" from @angular-devkit/[email protected]
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~0.1102.4" from the root project
npm ERR!       1 more (@ionic/angular-toolkit)
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.
npm ERR! 
npm ERR! See /home/sekthor/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/sekthor/.npm/_logs/2021-05-20T17_05_21_790Z-debug.log
[ERROR] An error occurred while running subprocess npm.
        
        npm i --save -E @capacitor/core@latest exited with exit code 1.
        
        Re-running this command with the --verbose flag may provide more information.

Installing dependencies may take several minutes.

  ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€

         Ionic Advisory, tailored solutions and expert services by Ionic

                             Go to market faster šŸ†
                    Real-time troubleshooting and guidance šŸ’
        Custom training, best practices, code and architecture reviews šŸ”Ž
      Customized strategies for every phase of the development lifecycle šŸ”®

                        šŸ‘‰  https://ion.link/advisory  šŸ‘ˆ

  ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€


> npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/postcss
npm ERR!   postcss@"8.2.14" from @angular-devkit/[email protected]
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~0.1102.4" from the root project
npm ERR!     peer @angular-devkit/build-angular@"^0.1102.4" from @ionic/[email protected]
npm ERR!     node_modules/@ionic/angular-toolkit
npm ERR!       dev @ionic/angular-toolkit@"^3.1.1" from the root project
npm ERR!   peer postcss@"^8.1.0" from [email protected]
npm ERR!   node_modules/autoprefixer
npm ERR!     autoprefixer@"10.2.4" from @angular-devkit/[email protected]
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~0.1102.4" from the root project
npm ERR!       1 more (@ionic/angular-toolkit)
npm ERR!   9 more (css-loader, cssnano, postcss-import, postcss-loader, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer postcss@"^8.2.15" from [email protected]
npm ERR! node_modules/cssnano/node_modules/cssnano-preset-default
npm ERR!   cssnano-preset-default@"^5.0.1" from [email protected]
npm ERR!   node_modules/cssnano
npm ERR!     cssnano@"5.0.2" from @angular-devkit/[email protected]
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~0.1102.4" from the root project
npm ERR!       1 more (@ionic/angular-toolkit)
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.
npm ERR! 
npm ERR! See /home/sekthor/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/sekthor/.npm/_logs/2021-05-20T17_05_28_760Z-debug.log
[ERROR] An error occurred while running subprocess npm.
        
        npm i exited with exit code 1.
        
        Re-running this command with the --verbose flag may provide more information.

I am fairly new to npm and I can't seem to find a solution on this site or anywhere else on the internet.

I have tried both the --force and --legacy-peer-deps, but received the same error.

What is the reason for this error and how do I fix it?

My node, npm & ionic versions are:

$ node --version
v16.2.0
$ npm --version
7.13.0
$ ionic --version
6.16.1

Upvotes: 4

Views: 2443

Answers (4)

E3G
E3G

Reputation: 487

Had a similar issue with node start using npm v7.5.2 and was fixed by upgrading to v7.22.0.

Upvotes: 0

peterclair
peterclair

Reputation: 21

That was my first guess - installing a more recent version of postcss, but unfortunately that did not solve it for me. Solution was downgrading from npm's version 7 to version 6.

    npm install -g npm@6

Upvotes: 2

Jared Peters
Jared Peters

Reputation: 11

I ran into this error and manually installing postcss npm i postcss fixed it as the stack trace shows a dependency was relying on the latest version of postcss version 8.2.15 and what was found was version 8.2.14.

Upvotes: 1

sekthor
sekthor

Reputation: 504

For some reason I couldn't get it to work on node version 16.2.0. However, using node version manager nvm I installed a second instance of node, the LTS version 14.17.0. With this downgrade, the setup process works.

nvm install 14.17.0

Upvotes: 2

Related Questions