Importing colocated JS (web component) from a library/dependency, anyone?

Phoenix Forum Proposals/Suggestions
1

Yesterday I encountered the following problem for the first time:

Having a dependency on a library that has its JS script modules colocated with the corresponding LiveComponent templates correctly results in having the JS class(es) end up in the library subdirectory within the phoenix-colocated directory, but no manifest file(s) are generated so I wonder how to import those classes and make thus imported web components visible to the app.

Shouldn’t there be support for this?

2

They are namespaced by the application, so you just need to add another entry to your hooks:

import { hooks as yourLibHooks } from 'phoenix-colocated/your_lib'

  hooks: {...colocatedHooks, ...yourLibHooks}
3

Nope. I’ve already tried that. I’m getting ✘ [ERROR] Could not resolve "phoenix-colocated/mylib"
although the library’s live component’s folder is in that directory and the generated .js file in it.
No manifest file though - which is what seems to be the problem.

btw, I’m not using hooks. those are custom elements.

4

I do this by adding the library to the ESBuild config.
Something like this (See NODE_PATH):

config :esbuild,
  version: "0.25.4",
  default: [
    args: ~w(js/app.js --bundle --target=es2022 --outdir=../priv/static/assets/js --external:/fonts/* --external:/images/* --alias:@=.),
    cd: Path.expand("../assets", __DIR__),
    env: %{
      "NODE_PATH" => [
        Path.expand("../deps", __DIR__),
        "#{Mix.Project.deps_paths()[:mylib]}/assets/node_modules",
        Mix.Project.build_path()
      ]
    }
  ]
5

So you add node_modules to the NODE_PATH, but how does this help the JS import statement see the JS files?

My path is already visible to the bundler because the part with generating the temporary JS (from the library’s JS in its own assets/js) and putting it in the app’s ../phoenix_colocated/mylib subfolder is already being done correctly by Phoenix, but the bundler doesn’t know what to do with it because there’s no automatically generated “index.js” manifest file for it.

It could be I’m missing something or doing something wrong or that the library should be doing something it doesn’t in its build process, the issue is the app has the automatically generated manifest files for all of its own colocated web components but not for the library’s.

6

@DaAnalyst does your library properly set

compilers: [:phoenix_live_view] ++ Mix.compilers(),

in your mix.exs?

2 Likes
7

No, it doesn’t. Will try that. Thanks a lot!