We blog about web and native apps

In one project I ended up installing Phoenix JS libraries straight from npm with yarn. This has a benefit that my Docker build is faster. Here is a part of package.json.

"dependencies": {
  "phoenix": "1.5.9",
  "phoenix_html": "2.14.3",
  "phoenix_live_view": "0.15.5",
  "topbar": "^1.x"
}

There is one issue with this approach. phoenix, phoenix_html, phoenix_live_view also have a hex package which is listed in mix.exs. It may happen that a developer updates the hex package but forgets the npm counterpart. Not cool, let’s make sure it doesn’t happen.

Credo check

Credo is an excellent library to check your Elixir code. It also lets you write custom checks. Here is the gist for the npm check.

1. Add yarn_parser to your deps {:yarn_parser, "~> 0.4.0", only: [:dev, :test]}.
2. Copy the file from the gist and add it to your project. I put mine to my_app/test/support/checks/yarn_checker.ex.
3. Edit .credo.exs.

• Add

    requires: ["./test/support/checks/*.ex"]

  and add your check to the custom checks section.

    #
    # Custom checks can be created using `mix credo.gen.check`.
    #
    {MyApp.YarnChecker,
     [
       package_json: "assets/package.json",
       yarn_lock: "assets/yarn.lock",
       packages: ["phoenix", "phoenix_html", "phoenix_live_view"]
     ]}

Now when you run mix credo, you will see a warning if the versions don’t match. You can adapt if you are installing with npm install instead of yarn.

This check helped me locate an issue that not all phoenix_html versions were published to npm.