Adding nodejs package to my Phoenix project broke esbuild. How to fix it?

have you checked if you have the dependency in package.json? the folder node_modules usually is added in gitignore.

Yes, I have. This is what I have in package.json:

{
  "dependencies": {
    "@tiptap/core": "^2.3.1",
    "@tiptap/pm": "^2.3.1",
    "@tiptap/starter-kit": "^2.3.1"
  }
}

I’m not sure I follow what you said about gitignore. I believe the fly deploy should only be looking at my local files not my github right?

Dependencies are usually not copied over in the build/deploy environment. Esbuild is also not responsible for installing your dependencies, you have to run npm install specifically, how you do that on fly io is beyond my knowledge.

Hmm, I had already run npm install. Ran it again just now, this is the result:

npm install

up to date, audited 53 packages in 270ms

23 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

So I feel like that part is ok?

I‘m not sure what you do locally matters. What matters is that those commands are also run when you build the docker images for fly.

When I migrated to Fly.io, I had to tweak my project a bit to install NPM packages.

I think this is all I had to patch:

Add npm and nodejs here in Dockerfile:

# install build dependencies
RUN apt-get update -y && apt-get install -y build-essential git nodejs npm \
    && apt-get clean && rm -f /var/lib/apt/lists/*_*

Add an npm ci install step to mix.exs assets.deploy:

      "assets.deploy": [
        "cmd --cd assets npm ci",
        "tailwind default --minify",
        "esbuild default --minify",
        "phx.digest"
      ],

Let me know if this doesn’t work- I may have missed another step I’m not remembering now.

Hi!

I did as you suggested and updated my Dockerfile and the mix.exs. I suspect there might be another step to your tweaks because I still got an error (albeit a different one now haha)

=> ERROR [builder 13/17] RUN mix assets.deploy                   1.3s 
------                                                                 
 > [builder 13/17] RUN mix assets.deploy:                              
1.260 npm ERR! The `npm ci` command can only install with an existing package-lock.json or
1.261 npm ERR! npm-shrinkwrap.json with lockfileVersion >= 1. Run an install with npm@5 or
1.261 npm ERR! later to generate a package-lock.json file, then try again.
1.266 
1.267 npm ERR! A complete log of this run can be found in:
1.267 npm ERR!     /root/.npm/_logs/2024-05-06T14_03_53_690Z-debug.log
1.280 ** (exit) 1
1.280     (mix 1.16.1) lib/mix/tasks/cmd.ex:74: Mix.Tasks.Cmd.run/1
1.280     (mix 1.16.1) lib/mix/task.ex:478: anonymous fn/3 in Mix.Task.run_task/5
1.280     (mix 1.16.1) lib/mix/task.ex:544: Mix.Task.run_alias/6
1.280     (mix 1.16.1) lib/mix/cli.ex:96: Mix.CLI.run_task/2
1.280     /usr/local/bin/mix:2: (file)
------
Error: failed to fetch an image or build from source: error building: failed to solve: process "/bin/sh -c mix assets.deploy" did not complete successfully: exit code: 1

I’m not sure why this error is being thrown. I have a package-lock.json file in the root directory of my app. and it definitely has a lockfileVersion > 1:

{
  "name": "wordsmith",
  "lockfileVersion": 3,
  "requires": true,

And the other suggestion from the error has already been done. I ran npm install with version 10.5.0. It seems like maybe fly deploy it is not detecting the existence of my package-lock.json at all?

I’m including the above in case the error jogs more memory and you remember some other small facet I need to implement. Thanks for your previous suggestion!

OK. I got it working now. I also posted this question to r/elixir and got a suggestion there:

If you are using most other default configuration, you’ll want to have your node_modules directory (along with the package.json etc.), inside of the assets folder.

So I moved package.json, package-lock.json, and the node_modules folder into my assets folder. That seems to have fixed things. The fly deploy ran successfully.

That poster also pointed out the documentation which I had read, but not clearly understood. It looks like there is a line there in option 2 that says “Call npm inside your assets directory”. I didn’t think that was the option I was using, but it looks like I should have used npm install from the get-go from inside that directory and it would have created the node_modules folder where it needed to go.

I also left in the changes that @dfalling suggested, so I’m not sure if that is part of why things are working now, but I’m glad they are. Thanks again everyone.

If you want to keep that in the root, you can tweak the assets.deploy to not change the directory: “cmd –cd assets npm ci”. Personally I prefer what you’ve done now with keeping the Javascript in the assets directory.

One other note: I just learned that npm ci actually installs dev dependencies as well. I’ve updated my build to this:

npm ci --only=prod

This ensures dev dependencies (eg rollup, prettier, etc.) aren’t included in the prod build.