gatsby new fails due to babel-plugin-root-import version mismatch (when package manager is npm)

[MartinRosenberg]

gatsby new fails using npm due to issues with babel-plugin-root-import, providing the following error:

npm error log

╰─ gatsby new gatsby-starter-ts https://github.com/jpedroschmitz/gatsby-starter-ts
info Creating new site from git: https://github.com/jpedroschmitz/gatsby-starter-ts.git

Cloning into 'gatsby-starter-ts'...
remote: Enumerating objects: 28, done.
remote: Counting objects: 100% (28/28), done.
remote: Compressing objects: 100% (23/23), done.
remote: Total 28 (delta 2), reused 22 (delta 2), pack-reused 0
Receiving objects: 100% (28/28), 217.99 KiB | 1.68 MiB/s, done.
success Created starter directory layout
info Installing packages...

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: gatsby-starter-ts@1.0.0
npm ERR! Found: babel-plugin-root-import@6.6.0
npm ERR! node_modules/babel-plugin-root-import
npm ERR!   dev babel-plugin-root-import@"6.6.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer babel-plugin-root-import@"^5.1.0" from eslint-import-resolver-root-import@1.0.4
npm ERR! node_modules/eslint-import-resolver-root-import
npm ERR!   dev eslint-import-resolver-root-import@"1.0.4" 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.
npm ERR!
npm ERR! See /Users/Martin/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

 ERROR

Command failed with exit code 1: npm install



  Error: Command failed with exit code 1: npm install

  - error.js:56 makeError
    [lib]/[gatsby-cli]/[execa]/lib/error.js:56:11

  - index.js:114 handlePromise
    [lib]/[gatsby-cli]/[execa]/index.js:114:26

  - task_queues:94 processTicksAndRejections
    node:internal/process/task_queues:94:5

  - init-starter.js:135 install
    [lib]/[gatsby-cli]/lib/init-starter.js:135:7

  - init-starter.js:202 clone
    [lib]/[gatsby-cli]/lib/init-starter.js:202:3

  - init-starter.js:343 initStarter
    [lib]/[gatsby-cli]/lib/init-starter.js:343:5

  - create-cli.js:487
    [lib]/[gatsby-cli]/lib/create-cli.js:487:9

Yarn also complains, but it's just a one-line warning:

warning " > eslint-import-resolver-root-import@1.0.4" has incorrect peer dependency "babel-plugin-root-import@^5.1.0".

[jpedroschmitz]

Hey @MartinRosenberg, thanks for reporting the issue!

ASAP I'll be taking a look at this error.

[jpedroschmitz]

Apparently, this is a problem with NPM 7. I've tested with NPM 6, and it's working correctly.

I'll try to find another library for the Eslint resolver with correct peer dependencies or submit a PR to update one.

For now, you can try removing your package-lock.json file and installing the dependencies again with npm i --legacy-peer-deps

[jpedroschmitz]

Sorry for taking so long. I have fixed this issue on #271.

Thanks for reporting it @MartinRosenberg ❤️

[kiril-daskalov]

Hello!

How this is fixed? I still get this error on NPM 8.

[jpedroschmitz]

It was fixed back then. It must have broken again with the recent updates on the packages.

PR welcome.