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

Phoenix Forum Questions / Help
, ,
1

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?

1 Like
2

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
3

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.

2 Likes
4

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!

5

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.

2 Likes
6

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

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

3 Likes
8

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.

9

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 :slight_smile:

8 Likes
10

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

1 Like
11

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:

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.

5 Likes
12

How can I know the version of the tailwind I have installed?
in my mix.lock shows this:

 {:hex, :tailwind, "0.2.0"...}

whith mix deps shows this:

* tailwind 0.2.0 (Hex package) (mix)
  locked at 0.2.0 (tailwind) 385e939f
  ok

but on the config/config.exs has this:

# 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__)
  ]
13

Thank you for the hint! No warnings anymore.

14

Not until October 26th :wink: (unless you upgrade again in the meantime).

1 Like
15

@romenigld Your confusion is understandable. There are 2 packages:

  1. The package in mix deps is an Elixir package called Tailwind which is the one thatā€™s at 0.2.0. According to its HexDocs page, ā€œTailwind is an installer and runner for tailwind.ā€

  2. The version labeled 3.2.4 refers to the actual Tailwind package. This is the value that needs to be updated to make the warning disappear. Check my other post to see how to do that.

2 Likes
16

i have some error showing the browserslist too, do i just ignore that? because in my tailwind css config.exs is the latest 3.2.7

17

3.3.2 is the latest at this time: Releases Ā· tailwindlabs/tailwindcss Ā· GitHub

2 Likes
18

Thanks Sir it solved it realy help meā€¦ hehe

19

@ariandanim Instructions in my other post in this thread

1 Like
20

yes, tks Sir