How does esbuild find Phoenix.js?

Jayshua · December 12, 2021, 9:35pm

I was exploring the new esbuild system in Phoenix. The documentation suggests that the two ways to import third-party libraries are by putting them in a vendor folder or by using npm install. However, the app generated by phx.new doesn’t appear to do either of those when importing the phoenix & phoenix liveview js. (Although it does use the first method to import the topbar library.)

Based on the output js file, it looks like esbuild is finding the js libraries in the deps directory, but I haven’t been able to find any config or code telling esbuild to look there.

How does this work?

josevalim · December 12, 2021, 10:04pm

We also set an environment variable in the esbuild config pointing to Elixir deps folder, and esbuild also looks for files in there. I am on my phone but I can give a full reference tomorrow.

josevalim · December 13, 2021, 7:10am

As promised:

github.com

phoenixframework/phoenix/blob/c6bd2ad5ad1d0b9d130e452344d42623690f6121/installer/templates/phx_single/config/config.exs#L41

    
      
          # Swoosh API client is needed for adapters other than SMTP.
          config :swoosh, :api_client, false<% end %><%= if @assets do %>
          
          
# Configure esbuild (the version is required)
          config :esbuild,
            version: "0.13.5",
            default: [
              args:
                ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
              cd: Path.expand("../assets", __DIR__),
              env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
            ]<% end %>
          
          
# Configures Elixir's Logger
          config :logger, :console,
            format: "$time $metadata[$level] $message\n",
            metadata: [:request_id]
          
          
# Use Jason for JSON parsing in Phoenix
          config :phoenix, :json_library, Jason

Jayshua · December 13, 2021, 6:08pm

Thank you!

So esbuild treats deps like a node_modules folder, finds the phoenix folder, reads the package.json inside, sees:

{
  ...
  "module": "./priv/static/phoenix.esm.js",
  "main": "./priv/static/phoenix.cjs.js",
  "unpkg": "./priv/static/phoenix.min.js",
  "jsdelivr": "./priv/static/phoenix.min.js",
  "exports": {
    "import": "./priv/static/phoenix.esm.js",
    "require": "./priv/static/phoenix.cjs.js"
  },
  ...
}

And picks one of them?

josevalim · December 13, 2021, 6:21pm

Yes, correct.

dhanson · February 3, 2022, 11:19am

I have an elixir json-api; We never converted from brunch to webpack. We added liveview dashboard for our production support/ issue resolution. In the normal course of actions we were upgrading our deps . we went from phoenix 1.5.0 to current to see what happened (way behind I know but we went live and had some issues to deal with…) All was good locally in dev after the deps upgrade; (we forgot to do the brunch rebuild of assets locally). CI caught that and threw an error about ES6 syntax in the phx javascript. We spent a day trying to figure out how to configure brunch to support that, and then said let’s go to webpack, then found that esbuild was the new and improved way to do this. It is fast, but we have an issue;

We have an SPA served from a different port/server, and on ‘start’ the app tries to open a socket on the SPA port. This thread looks like the right place to start to track this down. We have been trying to go back versions to get to a place where this socket behavior does not happen, with no luck. We removed the env: statement in the config.exs and that did not fix the socket connect behavior.

Any suggestions on where to look? I figure We cannot be the only SPA / phoenix API & Dashboard implementation. Do we just go back and never upgrade deps ever? or is this really and esbuild related issue? TIA.