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?

19 comments

/phoenix #npm #caniuse-lite

1 3222 19

2023-05-18 08:14:42 UTC

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

Post #8

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.

Post #10

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).

Post #6

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.

Post #2