How to use third party js in a Phoenix ColocatedHook

Phoenix Forum Questions / Help
,
1

Phoenix 1.8.0 gave us a new module ColocateHook, I try is today.
I set esbuild like this:

config :esbuild,
  version: "0.25.4",
  ex_cms: [
    args: ~w(
      js/app.js --bundle
      --target=es2022
      --outdir=../priv/static/assets/
      --external:/fonts/*
      --external:/images/*
      --public-path=/assets/
      --loader:.woff=copy
      --loader:.ttf=copy
      --loader:.eot=copy
      --loader:.woff2=copy
      --asset-names=fonts/[name]
      --loader:.css=copy
      --asset-names=css/[name]
      --alias:@=.),

And write the ColocatedHook like this:

 <div id="editor" phx-hook=".Editor" data-content={@post.content}>
  </div>
  <script :type={Phoenix.LiveView.ColocatedHook} name=".Editor">
        import { Crepe } from "@milkdown/crepe";
        export default {
          ......
        }
  </script>

I get an error: [ERROR] Could not resolve "@milikdown/crepe".

I guses this because the colocatedhook live the _dev/ and there do not have the node_modules and package.json.

Anyone can tell me how to use third part js in ColocatedHook?

2

Sorry, I personally can’t answer your question yet, as I haven’t tried it myself. However, I noticed something else yesterday: if you make the phx-hook conditional, for example,

phx-hook={@use_editor && "Editor"}

it won’t be associated with the script containing a colocated hook. But, probably, it’s so by design.