ariandanim
(HELP) Upgrading NPM in assets folder Phoenix Framework
My App Spec:
- Erlang/OTP 23 [erts-11.1.5] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [hipe] [dtrace]
- Elixir 1.11.3 (compiled with Erlang/OTP 23)
- Phoenix 1.5.7
- NPM version 7.3.0
- Node Js version 15.5.0
when i try to access the assets folder then typing "npm install"it shows like this:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: webpack@5.12.2
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.45.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!
Then i try to install node modules in assets folder typing "npm install --legacy-peer-deps"then show like this:
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/3142added 913 packages, and audited 916 packages in 3m
44 packages are looking for funding
runnpm fundfor detailsfound 0 vulnerabilities
i am wondering what the the warn deprecated above, so i typed in assets folder "npm outdated"then shows like this:
Package Current Wanted Latest Location Depended by
copy-webpack-plugin 5.1.2 5.1.2 7.0.0 node_modules/copy-webpack-plugin assets
css-loader 3.6.0 3.6.0 5.0.1 node_modules/css-loader assets
mini-css-extract-plugin 0.9.0 0.9.0 1.3.3 node_modules/mini-css-extract-plugin assets
node-sass 4.14.1 4.14.1 5.0.0 node_modules/node-sass assets
sass-loader 8.0.2 8.0.2 10.1.0 node_modules/sass-loader assets
terser-webpack-plugin 2.3.8 2.3.8 5.1.1 node_modules/terser-webpack-plugin assets
webpack 4.41.5 4.41.5 5.12.2 node_modules/webpack assets
webpack-cli 3.3.12 3.3.12 4.3.1 node_modules/webpack-cli assets
Question is, does is safe if i upgrading my assets folder the NPM plugin?
Most Liked
kokolegorille
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
kokolegorille
… 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.
kokolegorille
You need to install it with
npm install -g npm-check-updates
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
Courses that'll move you from confusion to "Aha, now I get it!"