ModuleBuildError with NPM in phoenix-liveview app

kokolegorille · September 1, 2021, 2:17pm

Because node-sass has been a real burden for Phoenix Team Core members when version broke the asset pipeline.

npm install fails on fresh project

opened 04:07PM - 04 Jan 21 UTC

closed 01:05PM - 06 Apr 21 UTC

### Environment * Elixir version (elixir -v): Elixir 1.11.2 * Phoenix versio…n (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 ```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

Not only this, but node-sass might be the main reason why Phoenix moved to esbuild