lmletham
Adding nodejs package to my Phoenix project broke esbuild. How to fix it?
Hey guys!
I added a JS package to my Phoenix project, specifically TipTap so I could have a text editor. They did not have Phoenix Framework specific install instructions so I used the Vanilla JS instructions and it seems to have worked locally but whenever I try to run fly deploy I get build errors now.
I have checked the following:
-
Tiptap package is correctly installed in the
wordsmith/node_modules/@tiptapfolder -
My esbuild settings in the
config/config.exsfile are set to look inside thenode_modulesfolder: -
My
app.jsfile is importing Tiptap correctly
I assume that my issue is some kind of relative path problem? I’m just not pointing correctly to the node_modules folder? But this is my folder structure and I don’t see anything wrong with the relative paths I have.
If anyone could help point out what the trouble spot is here, I’d greatly appreciate it!
P.S. I forgot to add, I also tried:
- using a relative path to the
node_modulesfolder in theapp.jsimport. That didn’t work. - marking the path as external (as suggested by the error message) but I must not have done it right because that also didn’t fix anything.
Marked As Solved
lmletham
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_modulesdirectory (along with thepackage.jsonetc.), inside of theassetsfolder.
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.
Also Liked
D4no0
have you checked if you have the dependency in package.json? the folder node_modules usually is added in gitignore.
dfalling
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.
dfalling
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.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
Courses that'll move you from confusion to "Aha, now I get it!"