npm install fails on fresh project #4126

scripttease · 2021-01-04T16:07:31Z

Environment

Elixir version (elixir -v): Elixir 1.11.2
Phoenix version (mix deps): 1.5.7 (phoenix) 774cd644
NodeJS version (node -v): v15.5.0
NPM version (npm -v): 7.3.0
Operating system: Ubuntu 20.04

Expected behavior

npm install should succeed after creating a new project with mix phx.new kalda --live

Actual behavior

npm install fails with this message

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: webpack@5.11.1
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"4.41.5" from the root project
npm ERR!   peer webpack@">=2" from babel-loader@8.2.2
npm ERR!   node_modules/babel-loader
npm ERR!     dev babel-loader@"^8.0.0" from the root project
npm ERR!   3 more (copy-webpack-plugin, css-loader, hard-source-webpack-plugin)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev mini-css-extract-plugin@"^0.9.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: webpack@4.44.2
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.4.0" from mini-css-extract-plugin@0.9.0
npm ERR!   node_modules/mini-css-extract-plugin
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/al/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/al/.npm/_logs/2021-01-04T16_04_12_308Z-debug.log

Here is the package.json

{
  "repository": {},
  "description": " ",
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.4.2",
    "sass-loader": "^8.0.2",
    "node-sass": "^4.13.1",
    "hard-source-webpack-plugin": "^0.13.1",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "terser-webpack-plugin": "^2.3.2",
    "webpack": "4.41.5",
    "webpack-cli": "^3.3.2"
  }
}

Thank you

The text was updated successfully, but these errors were encountered:

scripttease · 2021-01-04T16:32:54Z

Here is the full terminal output from creating a project until the problem

al@LAPTOP-B2B5ES6C:~/projects$ mix phx.new kalda --live
* creating kalda/config/config.exs
* creating kalda/config/dev.exs
* creating kalda/config/prod.exs
* creating kalda/config/prod.secret.exs
* creating kalda/config/test.exs
* creating kalda/lib/kalda/application.ex
* creating kalda/lib/kalda.ex
* creating kalda/lib/kalda_web/channels/user_socket.ex
* creating kalda/lib/kalda_web/views/error_helpers.ex
* creating kalda/lib/kalda_web/views/error_view.ex
* creating kalda/lib/kalda_web/endpoint.ex
* creating kalda/lib/kalda_web/router.ex
* creating kalda/lib/kalda_web/telemetry.ex
* creating kalda/lib/kalda_web.ex
* creating kalda/mix.exs
* creating kalda/README.md
* creating kalda/.formatter.exs
* creating kalda/.gitignore
* creating kalda/test/support/channel_case.ex
* creating kalda/test/support/conn_case.ex
* creating kalda/test/test_helper.exs
* creating kalda/test/kalda_web/views/error_view_test.exs
* creating kalda/lib/kalda/repo.ex
* creating kalda/priv/repo/migrations/.formatter.exs
* creating kalda/priv/repo/seeds.exs
* creating kalda/test/support/data_case.ex
* creating kalda/lib/kalda_web/templates/layout/root.html.leex
* creating kalda/lib/kalda_web/templates/layout/app.html.eex
* creating kalda/lib/kalda_web/templates/layout/live.html.leex
* creating kalda/lib/kalda_web/views/layout_view.ex
* creating kalda/lib/kalda_web/live/page_live.ex
* creating kalda/lib/kalda_web/live/page_live.html.leex
* creating kalda/test/kalda_web/views/layout_view_test.exs
* creating kalda/test/kalda_web/live/page_live_test.exs
* creating kalda/lib/kalda_web/gettext.ex
* creating kalda/priv/gettext/en/LC_MESSAGES/errors.po
* creating kalda/priv/gettext/errors.pot
* creating kalda/assets/webpack.config.js
* creating kalda/assets/.babelrc
* creating kalda/assets/js/app.js
* creating kalda/assets/css/app.scss
* creating kalda/assets/package.json
* creating kalda/assets/static/favicon.ico
* creating kalda/assets/css/phoenix.css
* creating kalda/assets/static/images/phoenix.png
* creating kalda/assets/static/robots.txt

Fetch and install dependencies? [Yn] y
* running mix deps.get
* running cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development

We are almost there! The following steps are missing:

    $ cd kalda
    $ cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development

Then configure your database in config/dev.exs and run:

    $ mix ecto.create

Start your Phoenix app with:

    $ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phx.server

al@LAPTOP-B2B5ES6C:~/projects$ cd kalda
al@LAPTOP-B2B5ES6C:~/projects/kalda$ cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: webpack@5.11.1
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"4.41.5" from the root project
npm ERR!   peer webpack@">=2" from babel-loader@8.2.2
npm ERR!   node_modules/babel-loader
npm ERR!     dev babel-loader@"^8.0.0" from the root project
npm ERR!   3 more (copy-webpack-plugin, css-loader, hard-source-webpack-plugin)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev mini-css-extract-plugin@"^0.9.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@4.44.2
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.4.0" from mini-css-extract-plugin@0.9.0
npm ERR!   node_modules/mini-css-extract-plugin
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/al/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/al/.npm/_logs/2021-01-04T16_31_53_249Z-debug.log

scripttease · 2021-01-04T16:37:40Z

I downgraded to these versions of Node and npm and the problem was resolved.

al@LAPTOP-B2B5ES6C:~/projects/kalda/assets$ node -v
v15.2.0
al@LAPTOP-B2B5ES6C:~/projects/kalda/assets$ npm -v
7.0.8

I'm keeping this open as the problem still exists with latest Node JS.

Thank you.

jeepers3327 · 2021-01-05T02:15:24Z

I think the issue is not with the framework but with frontend tooling. You can read more information here.

skovmand · 2021-01-09T20:42:06Z

It also looks like node-sass version 4 is not compatible with Node 15. Things work well with Node.js 14 on my machine.

imsys · 2021-01-11T14:54:31Z

Maybe the patch to update webpack to v5 would fix this: #4054

cduruk · 2021-01-22T19:44:00Z

It also looks like node-sass version 4 is not compatible with Node 15. Things work well with Node.js 14 on my machine.

This seems like indeed the issue. Phoenix 1.6 Changelog suggests node-sass is replaced with sass, which should fix this for once and all.

As a newcomer to this community, sorry if this is not the right forum but what's the timeline on that release?

jbosse · 2021-02-04T14:01:35Z

The issue is in the message Conflicting peer dependency: webpack@4.44.2. package.json is pinning webpack to version 4.41.5. It looks like Mini CSS wants to resolve to at least 4.44.2 in your log (for me running this today it was 4.46) so the dependency cannot be resolved. Modifying "webpack": "4.41.5" to "webpack": "^4.41.5" (to allow npm to resolve webpack to anything > 4.41 but less than 5) resolved the issue for me. I am running Node v15.6.0

TheFirstAvenger · 2021-03-07T18:56:42Z

If I am reading this correctly, this issue can be closed as it is fixed in #4198.

rktjmp · 2021-03-28T14:20:15Z

If I am reading this correctly, this issue can be closed as it is fixed in #4198.

Confirming #4198 solves this for me.

duffyjp · 2021-04-26T19:00:02Z

I'll chime in to note that node installed via homebrew on my Big Sur machine today was version 16.0.0.

npm install in my assets folder on a fresh 1.5.8 Phoenix app is totally broken. Installing Phoenix 1.6-dev manually works great. The Install Guide doesn't make any mention of avoiding Node 15+

Until 1.6 is release, could we get some notes on the required workaround added? I'm a RoR dev full time, so stuff like this really trips newbies like me up.

brew install node@14
brew link --overwrite node@14

GrantZukowski · 2021-06-04T18:00:19Z

I'm still having this issue if I try to use the https://hexdocs.pm/phoenix/installation.html#content. Every time I get to the npm install steps it fails, and I can't compile any front end assets. To fix it, I matched all the dependencies at the top of this issue, then made sure my node version was 14 and it worked.

charlesjavelona · 2021-06-07T15:00:02Z

Same here. I did a fresh install. Didn't work. Here's what I did to make the install work.
Downgrade to node v15.8.0

$ - nvm install 15.8.0
$ - npm i

jwandekoken · 2021-07-20T11:23:37Z

Using node v15.6.0 and npm v7.4.0 worked for me. But npm is showing some vulnerabilities though

Edit: when i was about to start the project with "mix phx.server" i had a problem with Node-Sass. Searching for the problem i found that node-sass does not support node v15. So i had to downgrade to v14.

nileshtrivedi · 2021-07-22T00:00:50Z

Agree with @duffyjp. I think it is silly that explicit version dependency on NodeJS version is not specified in package.json. For comparison, Ruby's Gemfiles let you declare the Ruby version which is expected.

Terrible experience for beginners - given that brew install node installs v16 which is totally broken in a default Phoenix app.

cduruk · 2021-07-22T00:04:31Z

if you use the tip of master branch of phoenix, it removes the node dependency — give it a try.

TheFirstAvenger · 2021-07-22T00:14:15Z

https://twitter.com/josevalim/status/1417017859847475201 for those of you who aren't aware of the details on removing the dependency.

Vibha6419 · 2021-10-18T08:56:05Z

how to delete the node modules and re-installing?
Can Someone tell me, please!!

jbosse · 2021-10-18T12:31:28Z

@Vibha6419 delete the /assets/node_modules folder/directory. Then ensure you are in the assets folder/directory in terminal/command line and enter the command npm install

Vibha6419 · 2021-10-18T15:04:25Z

Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (93).
I have these versions; node-sass@4.14.1, saas-loader@8.0.2 and node-sass@4.14.1.
What should i Do?

jbosse · 2021-10-18T16:59:08Z

I am not sure because I don’t develop on Linux.

…

On Oct 18, 2021, 11:04 AM -0400, Vibha6419 ***@***.***>, wrote: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (93). I have these versions; ***@***.***, ***@***.*** and ***@***.*** What should i Do? — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

lisasu-g · 2022-05-05T06:40:39Z

It also looks like node-sass version 4 is not compatible with Node 15. Things work well with Node.js 14 on my machine.

This seems like indeed the issue. Phoenix 1.6 Changelog suggests node-sass is replaced with sass, which should fix this for once and all.

As a newcomer to this community, sorry if this is not the right forum but what's the timeline on that release?

Thanks, you save my life.

cw789 mentioned this issue Jan 31, 2021

Update to webpack v5 #4054

Closed

jbosse mentioned this issue Feb 4, 2021

Allow webpack > 4.41 but < 5 #4198

Merged

Gazler closed this as completed Apr 6, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

npm install fails on fresh project #4126

npm install fails on fresh project #4126

scripttease commented Jan 4, 2021 •

edited

scripttease commented Jan 4, 2021

scripttease commented Jan 4, 2021

jeepers3327 commented Jan 5, 2021

skovmand commented Jan 9, 2021 •

edited

imsys commented Jan 11, 2021

cduruk commented Jan 22, 2021

jbosse commented Feb 4, 2021 •

edited

TheFirstAvenger commented Mar 7, 2021

rktjmp commented Mar 28, 2021

duffyjp commented Apr 26, 2021

GrantZukowski commented Jun 4, 2021

charlesjavelona commented Jun 7, 2021 •

edited

jwandekoken commented Jul 20, 2021 •

edited

nileshtrivedi commented Jul 22, 2021

cduruk commented Jul 22, 2021

TheFirstAvenger commented Jul 22, 2021

Vibha6419 commented Oct 18, 2021

jbosse commented Oct 18, 2021

Vibha6419 commented Oct 18, 2021

jbosse commented Oct 18, 2021 via email

lisasu-g commented May 5, 2022

npm install fails on fresh project #4126

npm install fails on fresh project #4126

Comments

scripttease commented Jan 4, 2021 • edited

Environment

Expected behavior

Actual behavior

scripttease commented Jan 4, 2021

scripttease commented Jan 4, 2021

jeepers3327 commented Jan 5, 2021

skovmand commented Jan 9, 2021 • edited

imsys commented Jan 11, 2021

cduruk commented Jan 22, 2021

jbosse commented Feb 4, 2021 • edited

TheFirstAvenger commented Mar 7, 2021

rktjmp commented Mar 28, 2021

duffyjp commented Apr 26, 2021

GrantZukowski commented Jun 4, 2021

charlesjavelona commented Jun 7, 2021 • edited

jwandekoken commented Jul 20, 2021 • edited

nileshtrivedi commented Jul 22, 2021

cduruk commented Jul 22, 2021

TheFirstAvenger commented Jul 22, 2021

Vibha6419 commented Oct 18, 2021

jbosse commented Oct 18, 2021

Vibha6419 commented Oct 18, 2021

jbosse commented Oct 18, 2021 via email

lisasu-g commented May 5, 2022

scripttease commented Jan 4, 2021 •

edited

skovmand commented Jan 9, 2021 •

edited

jbosse commented Feb 4, 2021 •

edited

charlesjavelona commented Jun 7, 2021 •

edited

jwandekoken commented Jul 20, 2021 •

edited