romenigld
Running Phoenix Server is warning from npm - caniuse-lite is outdated
When I run the Phoenix server It complains this warnings:
Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: https://github.com/browserslist/update-db#readme
So I go to the assets folder and run these command:
npx update-browserslist-db@latest
Need to install the following packages:
update-browserslist-db@1.0.11
Ok to proceed? (y) y
update-browserslist-db: Cannot find package.json. Is this the right directory to run `npx update-browserslist-db` in?
npm notice
npm notice New minor version of npm available! 9.5.0 -> 9.6.5
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.5
npm notice Run npm install -g npm@9.6.5 to update!
npm notice
❯ asdf current
elixir 1.14.3-otp-25 /Users/romenigld/.tool-versions
erlang 25.2.3 /Users/romenigld/.tool-versions
nodejs 19.7.0 /Users/romenigld/.tool-versions
postgres 14.3 /Users/romenigld/.tool-versions
ruby 3.0.0 /Users/romenigld/.tool-versions
yarn 1.22.10 /Users/romenigld/.tool-versions
❯ npm -v
9.5.0
❯ npm install -g npm@9.6.5
removed 1 package, and changed 47 packages in 4s
18 packages are looking for funding
run `npm fund` for details
Reshimming asdf nodejs...
❯ npm fund
assets
so I tried again to run the phoenix server and the same message was complaining:
Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
...
So after this, I run the following commands:
❯ mix clean
❯ mix compile
And tried to run the server again and the same message warning is complaining.
So it go again to the assets folder and installed the npm it compains to this:
❯ cd assets
❯ npm install
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /Users/romenigld/workspace/phoenix/phoenix_live_view/pragprog/phoenix-liveview-2nd-course/rld_code/rld_live_view_studio/assets/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/romenigld/workspace/phoenix/phoenix_live_view/pragprog/phoenix-liveview-2nd-course/rld_code/rld_live_view_studio/assets/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/romenigld/.npm/_logs/2023-04-28T14_28_33_871Z-debug-0.log
Could anyone help me with this?
What I need to do now for fix this?
Marked As Solved
linusdm
For what it’s worth, I’ve initiated a PR to get rid of that pesky browserslist warning that throws people off guard sometimes. See it evolve (or crash and burn) here: Ignore Browserslist warning. by linusdm · Pull Request #84 · phoenixframework/tailwind · GitHub
You can actually already set a config value for your tailwind config to supress that warning:
# Configure tailwind (the version is required)
config :tailwind,
version: "3.2.4",
default: [
args: ~w(
--config=tailwind.config.js
--input=css/app.css
--output=../priv/static/assets/app.css
),
cd: Path.expand("../assets", __DIR__),
env: %{"BROWSERSLIST_IGNORE_OLD_DATA" => "1"}
]
Or you can upgrade as was suggested 
Also Liked
arcanemachine
From what I understand, the procedure to upgrade the Tailwind Hex package (the one that is installed by default in Phoenix >=1.7.0) is as follows:
- In
config/config.exs, upgrade Tailwind to the desired version (list of versions is on their GitHub ‘Releases’ page). - Run
mix tailwind.install
That being said, I’m not sure if upgrading will produce any unexpected side effects. I upgraded from 3.2.4 to 3.3.2 and all my tests are still passing FWIW.
I posted this here since I couldn’t find the specific noob-level instructions on the subject.
LostKobrakai
It doesn’t matter what you do to your local node/npm install. Nothing of that is used.
The only thing you can do is change the version of the tailwind cli being pulled in by phoenix (as mentioned the version is set in your mix config).
LostKobrakai
That warnings’s suggested resolution is misleading. With the tailwind CLI everything is bundled in the binary, so there’s no way to update browserlist. The only way to get rid of the warning is to update to a newer tailwind version, which being newer has been built less time in the past.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Practical resources that improve the lives of professional developers.
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.
Enabling companies to succeed by building software people love.
Courses that'll move you from confusion to "Aha, now I get it!"