Help w/ upgrade to Phoenix 1.6.0

I had previously upgraded my Phoenix 1.5 app to use esbuild.

I’ve just upgraded my app to 1.6.0, following the instructions here.

I’m now see an error when building locally:

~/workspaces/elixir/speaker-karaoke > mix assets.deploy
Compiling 1 file (.ex)
 > js/app.js:13:7: error: No matching export in "../deps/phoenix_live_view/priv/static/phoenix_live_view.esm.js" for import "default"
    13 │ import LiveSocket from "phoenix_live_view"
       ╵        ~~~~~~~~~~

Despite this, the dashboard works, but I don’t like errors in my build (warnings I can stomach), but my production build fails.

Looking at the referenced file, it looks fine to me, ending with:

export {
  LiveSocket
};
//# sourceMappingURL=phoenix_live_view.esm.js.map

So I’m not sure what esbuild is complaining about here. Has anyone else seen this issue?

Before you ask, yes I tried a clean build:

~/workspaces/elixir/speaker-karaoke > mix clean --deps
~/workspaces/elixir/speaker-karaoke > mix phx.server  
===> Analyzing applications...
===> Compiling parse_trans
===> Analyzing applications...
===> Compiling mimerl
==> file_system
Compiling 7 files (.ex)
...
Compiling 29 files (.ex)
Generated sk app
[info] Running SkWeb.Endpoint with cowboy 2.9.0 at 0.0.0.0:4000 (http)
[info] Access SkWeb.Endpoint at http://localhost:4000
[debug] Downloading esbuild from https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.12.18.tgz
 > js/app.js:13:7: error: No matching export in "../deps/phoenix_live_view/priv/static/phoenix_live_view.esm.js" for import "default"
    13 │ import LiveSocket from "phoenix_live_view"
       ╵        ~~~~~~~~~~

1 error
[watch] build finished, watching for changes...
^C
BREAK: (a)bort (A)bort with dump (c)ontinue (p)roc info (i)nfo
       (l)oaded (v)ersion (k)ill (D)b-tables (d)istribution
^C%                                                                                                                                           
~/workspaces/elixir/speaker-karaoke > iex -v
Erlang/OTP 24 [erts-12.1] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit] [dtrace]

IEx 1.12.3 (compiled with Erlang/OTP 24)
~/workspaces/elixir/speaker-karaoke > 

There is no default export, so LiveSocket has to be imported in your app.js as (note the curly braces):

import { LiveSocket } from "phoenix_live_view"
3 Likes

Thanks for the help … I had just figured it out. phoenix_live_view.js must have slightly changed structure between versions.

1 Like