(HELP) Upgrading NPM in assets folder Phoenix Framework

Hello and welcome…

Yes it is, but as for all major changes, You need update configuration. This time it’s webpack going to version 5.

You might follow this post about PR to Upgrade to webpack 5 - #12 by webuhu

Tkyou,
how i set for the first time create my App without editing manual the package ? or still should i edit manually?

I do it manually.

… with the help of this package.

https://www.npmjs.com/package/npm-check-updates

You need to know that there might be some breaking changes when updating, and You need to configure those files…

assets/webpack.config.js

Be sure to follow PR update path

config/dev.exs

Update this part.

  watchers: [
    node: [
      "node_modules/webpack/bin/webpack.js",
      "--mode",
      "development",
      "--watch",
      "--watch-options-stdin",
      cd: Path.expand("../assets", __DIR__)
    ]
  ]

This is a simple example of ncu, from the assets folder.

$ ncu
Checking /...
[====================] 29/29 100%

 terser-webpack-plugin  ^5.1.0  →  ^5.1.1   
 webpack                5.12.1  →  5.12.3   

Run ncu -u to upgrade package.json

As You can see there are some minor changes, and it’s probably safe to run ncu -u. But if You see some majors changing… You need to check for configuration update.

This is not really Phoenix related, but by default it uses Webpack to bundle your assets.

when i typed ncu in my assets folder is show nothing, only said command not found

You need to install it with

npm install -g npm-check-updates

after i typed “npm install -g npm-check-updates”, then show like this:

[info] Running BlogWeb.Endpoint with cowboy 2.8.0 at 0.0.0.0:4000 (http)
[error] Could not start node watcher because script “/Users/mine/Documents/myapp/assets/node_modules/webpack/bin/webpack.js” does not exist. Your Phoenix application is still running, however assets won’t be compiled. You may fix this by running “npm install” inside the “assets” directory.

when i tried typed “npm install”, the message showing like this:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: webpack@5.15.0
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.46.0
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 /Users/mine/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/mine/.npm/_logs/2021-01-15T06_27_11_135Z-debug.log

so i tried typed “npm install --force” then show like this :

npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: undefined@undefined
npm WARN Found: webpack@4.46.0
npm WARN node_modules/webpack
npm WARN peer webpack@“^4.4.0” from mini-css-extract-plugin@0.9.0
npm WARN node_modules/mini-css-extract-plugin
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@“^4.4.0” from mini-css-extract-plugin@0.9.0
npm WARN node_modules/mini-css-extract-plugin
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: webpack@5.15.0
npm WARN node_modules/webpack
npm WARN dev webpack@“4.41.5” from the root project
npm WARN 4 more (babel-loader, copy-webpack-plugin, css-loader, hard-source-webpack-plugin)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@“^4.4.0” from mini-css-extract-plugin@0.9.0
npm WARN node_modules/mini-css-extract-plugin
npm WARN dev mini-css-extract-plugin@“^0.9.0” from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: webpack@5.15.0
npm WARN node_modules/webpack
npm WARN dev webpack@“4.41.5” from the root project
npm WARN 4 more (babel-loader, copy-webpack-plugin, css-loader, hard-source-webpack-plugin)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@“^4.4.0” from mini-css-extract-plugin@0.9.0
npm WARN node_modules/mini-css-extract-plugin
npm WARN dev mini-css-extract-plugin@“^0.9.0” from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: undefined@undefined
npm WARN Found: webpack@4.46.0
npm WARN node_modules/webpack
npm WARN peer webpack@“^4.0.0” from optimize-css-assets-webpack-plugin@5.0.4
npm WARN node_modules/optimize-css-assets-webpack-plugin
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@“^4.0.0” from optimize-css-assets-webpack-plugin@5.0.4
npm WARN node_modules/optimize-css-assets-webpack-plugin
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: webpack@5.15.0
npm WARN node_modules/webpack
npm WARN dev webpack@“4.41.5” from the root project
npm WARN 4 more (babel-loader, copy-webpack-plugin, css-loader, hard-source-webpack-plugin)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@“^4.0.0” from optimize-css-assets-webpack-plugin@5.0.4
npm WARN node_modules/optimize-css-assets-webpack-plugin
npm WARN dev optimize-css-assets-webpack-plugin@“^5.0.1” from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: webpack@5.15.0
npm WARN node_modules/webpack
npm WARN dev webpack@“4.41.5” from the root project
npm WARN 4 more (babel-loader, copy-webpack-plugin, css-loader, hard-source-webpack-plugin)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@“^4.0.0” from optimize-css-assets-webpack-plugin@5.0.4
npm WARN node_modules/optimize-css-assets-webpack-plugin
npm WARN dev optimize-css-assets-webpack-plugin@“^5.0.1” from the root project
npm WARN deprecated urix@0.1.0: Please see GitHub - lydell/urix: [DEPRECATED] Makes Windows-style paths more unix and URI friendly. · GitHub
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: GitHub - lydell/resolve-url: [DEPRECATED] Like Node.js’ `path.resolve`/`url.resolve` for the browser. · GitHub
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

added 913 packages, and audited 916 packages in 4m

44 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

once again i tried typing "npm install -g npm-check-updates"and show like this:

npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

changed 295 packages, and audited 296 packages in 12s

22 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

then i go to main folder project typing “mix ecto.create”
then typing “mix phx.server” then show like this:

[info] Running BlogWeb.Endpoint with cowboy 2.8.0 at 0.0.0.0:4000 (http)
[info] Access BlogWeb.Endpoint at http://localhost:4000

webpack is watching the files…

[hardsource:9afb6475] Writing new cache 9afb6475…
[hardsource:9afb6475] Tracking node dependencies with: package-lock.json.
Hash: 060071523ec7e90f00cc
Version: webpack 4.41.5
Time: 2365ms
Built at: 01/15/2021 2:53:54 PM
Asset Size Chunks Chunk Names
../css/app.css 10.7 KiB app [emitted] app
../favicon.ico 1.23 KiB [emitted]
../images/phoenix.png 13.6 KiB [emitted]
../robots.txt 202 bytes [emitted]
app.js 13.5 KiB app [emitted] app
Entrypoint app = ../css/app.css app.js
[0] multi ./js/app.js 28 bytes {app} [built]
[../deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {app} [built]
[./css/app.scss] 39 bytes {app} [built]
[./js/app.js] 490 bytes {app} [built]
+ 2 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!css/app.scss:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/dist/cjs.js!./css/phoenix.css] 10.4 KiB {mini-css-extract-plugin} [built]
[./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss] 1 KiB {mini-css-extract-plugin} [built]
+ 1 hidden module

the WEBPACK is still version 4

Do i missing something steps? please help..

Continue with my comment above..

i try typed “npm install --legacy-peer-deps” in my assets folder then show like this

added 56 packages, removed 320 packages, changed 73 packages, and audited 652 packages in 16s

56 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

then i typed ncu, its showing like this:

[====================] 15/15 100%

All dependencies match the latest package versions

then i go to my main folder app and typing “mix phx.server” then showing error like this:

[error] Task pid<0.483.0> started from BlogWeb.Endpoint terminating
** (stop) :watcher_command_error
(phoenix 1.5.7) lib/phoenix/endpoint/watcher.ex:37: Phoenix.Endpoint.Watcher.watch/3
(elixir 1.11.3) lib/task/supervised.ex:90: Task.Supervised.invoke_mfa/2
(stdlib 3.14) proc_lib.erl:226: :proc_lib.init_p_do_apply/3
Function: &Phoenix.Endpoint.Watcher.watch/3
Args: [“node”, [“node_modules/webpack/bin/webpack.js”, “–mode”, “development”, “–watch”, “–watch-options-stdin”], [cd: “/Users/mineDocuments/phoenix/blog/assets”]]
[webpack-cli] ValidationError: Invalid options object. Terser Plugin has been initialized using an options object that does not match the API schema.

• options has an unknown property ‘sourceMap’. These properties are valid:
  object { test?, include?, exclude?, terserOptions?, extractComments?, parallel?, minify? }

i don’t know what next… T_T

You really need to follow the PR I linked in my first post, because it won’t work otherwise…

You need to update config/dev.exs

And webpack.config.js

thankyou bro, its works, here my step according the PR

in my app folder config/dev.exs : i am remove this line

“node_modules/webpack/bin/webpack.js”,
“–mode”,
“development”,
“–watch-stdin”,

then replace with this line :

“node_modules/webpack/bin/webpack.js”,
“–mode”,
“development”,
“–watch”,
“–watch-options-stdin”,

after that i go to folder assets/package.json then i remove this line in the below dependencies:

"@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",
"hard-source-webpack-plugin": "^0.13.1",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"sass-loader": "^8.0.2",
"terser-webpack-plugin": "^2.3.2",
"webpack": "4.41.5",
"webpack-cli": "^3.3.2"

and replace with this line :

"@babel/core": "^7.x",
"@babel/preset-env": "^7.x",
"babel-loader": "^8.x",
"copy-webpack-plugin": "^6.x",
"css-loader": "^5.x",
"css-minimizer-webpack-plugin": "^1.x",
"mini-css-extract-plugin": "^1.x",
"sass": "^1.x",
"sass-loader": "^10.x",
"webpack": "^5.x",
"webpack-cli": "^4.x"

after that i go to assets/webpack.config.js i remove all the line then replace with this line

const path = require(‘path’);
const glob = require(‘glob’);
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
const CssMinimizerPlugin = require(‘css-minimizer-webpack-plugin’);
const CopyWebpackPlugin = require(‘copy-webpack-plugin’);

module.exports = (env, options) => {
const devMode = options.mode !== ‘production’;

return {

entry: {
  'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
},
output: {
  filename: '[name].js',
  path: path.resolve(__dirname, '../priv/static/js'),
  publicPath: '/js/'
},

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    },
    {
      test: /\.[s]?css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'sass-loader',
      ],
    }
  ]
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin({
  patterns: [
    { from: 'static/', to: '../' }
  ]
})

],
optimization: {
minimizer: [
‘…’,
new CssMinimizerPlugin()
]
},
devtool: devMode ? ‘source-map’ : undefined
}
};

here is the link to make changes some file
https://github.com/phoenixframework/phoenix/commit/c364104ed69ef955e3fc5c48426a8da1b530fc30