Installing JS dependencies through mix

Questions & Help Questions
1

According to Asset Management — Phoenix v1.8.7, it’s possible to install JS dependencies without relying on npm, by adding them as git dependencies with app: false, compile: false in mix.exs. I tried to do that to install phoenix-custom-event-hook by adding this dependency to my mix.exs:

      {:phoenix_custom_event_hook,
       github: "launchscout/phoenix-custom-event-hook",
       ref: "1d31e36f437d340203e7b952e5fd201c3c841943",
       app: false,
       compile: false,
       depth: 1},

When I run mix deps.get, I see that it’s successfully cloned. However, when I then try to import it in app.js, I just get a build error:

// I tried both of those options separately, neither worked
import PhoenixCustomEventHook from 'phoenix_custom_event_hook';
import PhoenixCustomEventHook from 'phoenix-custom-event-hook';

[watch] build started (change: "js/app.js")
✘ [ERROR] Could not resolve "phoenix-custom-event-hook"

    js/app.js:28:35:
      28 │ import PhoenixCustomEventHook from 'phoenix-custom-event-hook';
         ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "phoenix-custom-event-hook" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

How do I resolve this? According to the documentation, I should just be able to import them as normal, so why isn’t it working?

2

The package.json mentions dist/* files, but those do not exist on the github repo. This still depends on the repo being a proper npm package with all files available.

3

You can get an ESM copy and add it to your vendor folder