Running Phoenix Server is warning from npm - caniuse-lite is outdated

and this is the content of the log file /Users/romenigld/.npm/_logs/2023-04-28T14_28_33_871Z-debug-0.log:

0 verbose cli /Users/romenigld/.asdf/installs/nodejs/19.7.0/bin/node /Users/romenigld/.asdf/installs/nodejs/19.7.0/bin/npm
1 info using npm@9.5.0
2 info using node@v19.7.0
3 timing npm:load:whichnode Completed in 2ms
4 timing config:load:defaults Completed in 2ms
5 timing config:load:file:/Users/romenigld/.asdf/installs/nodejs/19.7.0/lib/node_modules/npm/npmrc Completed in 3ms
6 timing config:load:builtin Completed in 3ms
7 timing config:load:cli Completed in 2ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:/Users/romenigld/workspace/phoenix/phoenix_live_view/pragprog/phoenix-liveview-2nd-course/rld_code/rld_live_view_studio/assets/.npmrc Completed in 0ms
10 timing config:load:project Completed in 2ms
11 timing config:load:file:/Users/romenigld/.npmrc Completed in 2ms
12 timing config:load:user Completed in 3ms
13 timing config:load:file:/usr/local/etc/npmrc Completed in 0ms
14 timing config:load:global Completed in 1ms
15 timing config:load:setEnvs Completed in 1ms
16 timing config:load Completed in 15ms
17 timing npm:load:configload Completed in 15ms
18 timing npm:load:mkdirpcache Completed in 0ms
19 timing npm:load:mkdirplogs Completed in 0ms
20 verbose title npm install
21 verbose argv "install"
22 timing npm:load:setTitle Completed in 24ms
23 timing config:load:flatten Completed in 2ms
24 timing npm:load:display Completed in 4ms
25 verbose logfile logs-max:10 dir:/Users/romenigld/.npm/_logs/2023-04-28T14_28_33_871Z-
26 verbose logfile /Users/romenigld/.npm/_logs/2023-04-28T14_28_33_871Z-debug-0.log
27 timing npm:load:logFile Completed in 6ms
28 timing npm:load:timers Completed in 0ms
29 timing npm:load:configScope Completed in 0ms
30 timing npm:load Completed in 51ms
31 timing config:load:flatten Completed in 1ms
32 timing arborist:ctor Completed in 1ms
33 silly logfile start cleaning logs, removing 1 files
34 timing arborist:ctor Completed in 0ms
35 silly logfile done cleaning log files
36 timing idealTree:init Completed in 14ms
37 timing idealTree:userRequests Completed in 0ms
38 silly idealTree buildDeps
39 timing idealTree:#root Completed in 1ms
40 timing idealTree:buildDeps Completed in 1ms
41 timing idealTree:fixDepFlags Completed in 0ms
42 timing idealTree Completed in 17ms
43 timing reify:loadTrees Completed in 18ms
44 timing reify:diffTrees Completed in 1ms
45 silly reify moves {}
46 timing reify:retireShallow Completed in 1ms
47 timing reify:createSparse Completed in 0ms
48 timing reify:loadBundles Completed in 0ms
49 timing reify:unpack Completed in 0ms
50 timing reify:unretire Completed in 0ms
51 timing build:queue Completed in 0ms
52 timing build:deps Completed in 0ms
53 timing build Completed in 0ms
54 timing reify:build Completed in 1ms
55 timing reify:trash Completed in 0ms
56 timing reify:save Completed in 2ms
57 timing reify Completed in 30ms
58 timing command:install Completed in 36ms
59 verbose stack Error: 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'
60 verbose cwd /Users/romenigld/workspace/phoenix/phoenix_live_view/pragprog/phoenix-liveview-2nd-course/rld_code/rld_live_view_studio/assets
61 verbose Darwin 21.3.0
62 verbose node v19.7.0
63 verbose npm  v9.5.0
64 error code ENOENT
65 error syscall open
66 error path /Users/romenigld/workspace/phoenix/phoenix_live_view/pragprog/phoenix-liveview-2nd-course/rld_code/rld_live_view_studio/assets/package.json
67 error errno -2
68 error 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'
69 error enoent This is related to npm not being able to find a file.
69 error enoent
70 verbose exit -2
71 timing npm Completed in 121ms
72 verbose code -2
73 error A complete log of this run can be found in:
73 error     /Users/romenigld/.npm/_logs/2023-04-28T14_28_33_871Z-debug-0.log

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.

could you help me with this?
And I notice when I tried to install the new npm version with the npm install -g npm@9.6.5.
It isn’t changed to the 9.6.5 version.

npm -v
9.5.0

Which command I can change for this new version?
thank you for reply @LostKobrakai!

Phoenix (by default) doesn’t use node or npm directly anymore. It pulls in the tailwind cli with the tailwind hex package. The version of tailwind cli being pulled is defined in your config/config.exs.

I run now the and have:

npm doctor
Check                               Value   Recommendation/Notes
npm ping                            ok
npm -v                              not ok  Use npm v9.6.5
node -v                             not ok  Use node v19.9.0 (current: v19.7.0)
npm config get registry             ok      using default registry (https://registry.npmjs.org/)
git executable in PATH              ok      /usr/bin/git
global bin folder in PATH           ok      /usr/local/bin
Perms check on cached files         ok
Perms check on local node_modules   ok
Perms check on global node_modules  ok
Perms check on local bin folder     ok
npm ERR! checkFilesPermission Missing permissions on /usr/local/bin/.keepme (expect: executable)
Perms check on global bin folder    not ok  Check the permissions of files in /usr/local/bin
npm WARN verifyCachedFiles Content garbage-collected: 1340 (178803645 bytes)
npm WARN verifyCachedFiles Cache issues have been fixed
Verify cache contents               ok      verified 3898 tarballs
npm ERR! Some problems found. See above for recommendations.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/romenigld/.npm/_logs/2023-04-28T14_54_38_141Z-debug-0.log

So I discard doing those things like update the nodejs(by asdf) and npm?
My application is running.

iex -S mix phx.server
Erlang/OTP 25 [erts-13.1.5] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [jit:ns]

[info] Running RldLiveViewStudioWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
[info] Access RldLiveViewStudioWeb.Endpoint at http://localhost:4000
Interactive Elixir (1.14.3) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> [watch] build finished, watching for changes...
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

Rebuilding...

Done in 1510ms.
[info] CONNECTED TO Phoenix.LiveView.Socket in 146µs
...

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

Thank you very much for clarifying and sorry for dwelling on the wrong idea.
I’m Brazilian and sometimes I don’t understand the English language perfectly.

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

That‘s a great solution, because any version in the generators will eventually become old enough for the warning to show up.

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.