Webpack.js does not exist in my Phoenix application

I simply start a new phoenix project and when I try to run it, I receive this error:

[error] Could not start Node.js watcher because script 
"/home/username/projects/Elixir/projectName/assets/node_modules/webpack/bin/webpack.js" 
does not exist. Your Phoenix application is still running, 
however assets won't be compiled. You may fix this by 
running "npm install" inside the "assets" directory.

maybe it can help you

1 Like

Hello and welcome.
Is this happening after you run npm install in the assets dir?

yes, exactly. I try cd assets && npm install many times but it’s not solved.
this command freezing my terminal.

Have no clue at the moment sorry…
could you please provide your node and npm versions? (node -v; npm -v)

~ >>> node -v                                                             
v16.2.0
~ >>> npm -v                                                              
7.15.0

I think webpack is not installed right on the project because, because no photos and styles are displayed during the project

when I try install npm on assets/
_> npm install

npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
[              ....] / reify:@babel/helper-validator-option: timing reifyNode:node_modules/@babel/plugin-proposal-object-rest-spread Completednpm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated

[                ..] | reify:cross-spawn: timing reifyNode:node_npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
[                 .] / reify:wnpm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

[                 .] - reify:asn1.js: timing reifyNode:node_modules/css-loader Compnpm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
[                 .] - reify:elliptinpm ERR! code 1

npm ERR! path /home/husen/Downloads/Elixir/testPro/assets/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /usr/bin/node /home/husen/Downloads/Elixir/testPro/assets/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   '/usr/bin/node',
npm ERR! gyp verb cli   '/home/husen/Downloads/Elixir/testPro/assets/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.2.0 | linux | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (/home/husen/Downloads/Elixir/testPro/assets/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/home/husen/Downloads/Elixir/testPro/assets/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/home/husen/Downloads/Elixir/testPro/assets/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /home/husen/Downloads/Elixir/testPro/assets/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /home/husen/Downloads/Elixir/testPro/assets/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /home/husen/Downloads/Elixir/testPro/assets/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:194:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (/home/husen/Downloads/Elixir/testPro/assets/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/home/husen/Downloads/Elixir/testPro/assets/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/home/husen/Downloads/Elixir/testPro/assets/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /home/husen/Downloads/Elixir/testPro/assets/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /home/husen/Downloads/Elixir/testPro/assets/node_modules/isexe/index.js:42:5
 npm ERR! gyp verb `which` failed     at /home/husen/Downloads/Elixir/testPro/assets/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:194:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python /usr/bin/python
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: Command failed: /usr/bin/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                       ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack 
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:326:12)
 npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:365:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1067:16)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! gyp ERR! System Linux 5.9.16-1-MANJARO
npm ERR! gyp ERR! command "/usr/bin/node" "/home/husen/Downloads/Elixir/testPro/assets/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /home/husen/Downloads/Elixir/testPro/assets/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.2.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok 
npm ERR! Build failed with error code: 1
                                                                                                                                              
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/husen/.npm/_logs/2021-06-15T09_20_58_045Z-debug.log

I think the current JavaScript dependencies in a default phoenix project are only compatible with node <15. You can use nvm to manage your node version (similar to asdf for elixir and erlang).

3 Likes

You can just as easily use asdf for node as well btw. Works fine.

2 Likes

Oh cool, always good to have fewer tools on the go. I’m working full-time in a php backend + laravel frontend app so my Elixir ecosystem knowledge is hobby level only.

If you’re deploying your app via a Docker script how can you make sure that your node version is == 14?

Michael

It really depends on your docker image. You can install use nvm (or probably asdf) to manage it, install it with the linux package manager.

Here is an example gist I found that used nvm to manage the node version: Install node and npm with nvm using Docker. · GitHub

# set the base image to Debian
# https://hub.docker.com/_/debian/
FROM debian:latest

# replace shell with bash so we can source files
RUN rm /bin/sh && ln -s /bin/bash /bin/sh

# update the repository sources list
# and install dependencies
RUN apt-get update \
    && apt-get install -y curl \
    && apt-get -y autoclean

# nvm environment variables
ENV NVM_DIR /usr/local/nvm
ENV NODE_VERSION 4.4.7

# install nvm
# https://github.com/creationix/nvm#install-script
RUN curl --silent -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.2/install.sh | bash

# install node and npm
RUN source $NVM_DIR/nvm.sh \
    && nvm install $NODE_VERSION \
    && nvm alias default $NODE_VERSION \
    && nvm use default

# add node and npm to path so the commands are available
ENV NODE_PATH $NVM_DIR/v$NODE_VERSION/lib/node_modules
ENV PATH $NVM_DIR/versions/node/v$NODE_VERSION/bin:$PATH

# confirm installation
RUN node -v
RUN npm -v

This is the docker image I am using at the moment for a phoenix app based on the one in the phoenix docs. You can specify the versions of the dependencies with apk like this apk add npm=7:


# install build dependencies
RUN apk add --no-cache build-base npm git python3

# prepare build dir
WORKDIR /app

# install hex + rebar
RUN mix local.hex --force && \
  mix local.rebar --force

# set build ENV
ENV MIX_ENV=prod

# install mix dependencies
COPY mix.exs mix.lock ./
COPY config config
RUN mix do deps.get, deps.compile
# fix another broken dependency 25/5/2021
RUN mix do deps.clean cowlib, deps.get cowlib, deps.compile cowlib

# build assets
COPY assets/package.json assets/package-lock.json ./assets/
RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error

COPY priv priv
COPY assets assets
RUN npm run --prefix ./assets deploy
RUN mix phx.digest

# compile and build release
COPY lib lib
# uncomment COPY if rel/ exists
# COPY rel rel
RUN mix do compile, release

# prepare release image
FROM alpine:3.13 AS app
RUN apk add --no-cache openssl ncurses-libs libstdc++

WORKDIR /app

RUN chown nobody:nobody /app

USER nobody:nobody

COPY --from=build --chown=nobody:nobody /app/_build/prod/rel/pocketmoney ./

COPY sys/docker/start.sh ./

ENV HOME=/app

CMD ["./start.sh"]