nuxt: not found inside docker image

Question

I am building a docker environment for a nuxt 3 app. This is my package.json file:

{
  "private": true,
  "scripts": {
    "start": "nuxt start",
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "prepare": "husky install",
    "prepare:hook": "husky add .husky/commit-msg \"npx --no -- commitlint --edit $1"
  },
  "dependencies": {
    "nuxt": "3.0.0-rc.6"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.0.3",
    "@commitlint/config-conventional": "^17.0.3",
    "@commitlint/types": "^17.0.0",
    "@formkit/nuxt": "1.0.0-beta.9",
    "@formkit/themes": "1.0.0-beta.9",
    "@formkit/vue": "1.0.0-beta.9",
    "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
    "@pinia/nuxt": "^0.3.0",
    "@swisscom/sdx": "file:./sdx",
    "@typescript-eslint/eslint-plugin": "^5.30.5",
    "@typescript-eslint/parser": "^5.30.5",
    "eslint": "^8.19.0",
    "eslint-plugin-nuxt": "^3.2.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.2.0",
    "husky": "^8.0.1",
    "luxon": "^3.0.1",
    "pinia": "^2.0.16",
    "prettier": "2.7.1",
    "sass": "^1.53.0",
    "typescript": "^4.7.4",
    "vue": "^3.2.37"
  }
}

This is my docker-compose.yml file:

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
      args:
        - NPM_TOKEN=${NPM_TOKEN}
        - NPM_MAIL=${NPM_MAIL}
    restart: always
    ports:
      - '3000:3000'
    env_file:
      - .env
    depends_on:
      - db
  db:
    image: mongo
    restart: always
    ports:
      - 27017:27017
    volumes:
      - smap_db:/usr/db/smap
    environment:
      MONGO_INITDB_ROOT_USERNAME: ${DB_USER}
      MONGO_INITDB_ROOT_PASSWORD: ${DB_PASSWORD}
volumes:
  smap_db:
    external: true

And this is my Dockerfile for the nuxt 3 app:

# Dockerfile
FROM node:18.6.0-bullseye

ARG NPM_TOKEN
ARG NPM_MAIL

# Set working directory
WORKDIR /usr/bin/smap

# Install dependencies
COPY .npmrc package.json sdx ./
RUN npm install
RUN rm -f .npmrc

# Copy the app
COPY . .
RUN npm run build

EXPOSE 3000

ENV NUXT_HOST=0.0.0.0

CMD [ "npm", "start" ]

This is my .dockerignore file:

# Dependencies
node_modules

# Editor
.vscode

# Build outputs
.nuxt
.output
dist

# Commitlint
.husky
commitlint.config.ts

# Other
README.md

When I run docker compose up I get the following error from building the docker file:

=> ERROR [7/7] RUN npm run build                                                                                                                      0.8s
------
 > [7/7] RUN npm run build:
#0 0.796
#0 0.796 > build
#0 0.796 > nuxt build
#0 0.796
#0 0.803 /tmp/build6594337338.sh: 2: nuxt: not found
------
failed to solve: executor failed running [/bin/sh -c npm run build]: exit code: 127

Here is what I have tried so far to solve this:

• Deleted all containers, volumes etc. associated with my app and then rebuild everything
• Reset docker to factory settings
• Deactivated the buildkit feature
• Commented everything out in the .dockerignore
• Tried the following image versions from node:
  • node:18.6.0-bullseye
  • node:18.6.0
  • node:18.6.0-alpine
  • node:18

All of this didn't help and I always got the same error.

Why is the nuxt command not found inside the docker container? Am I doing something wrong? Does anyone know how I can fix this?

Update

I set the NPM_CONFIG_LOGLEVEL to info. The error is still the same but with some additional information:

=> ERROR [8/8] RUN npm run build                                                                                                                      1.7s
------
 > [8/8] RUN npm run build:
#0 1.641 npm info using npm@8.15.0
#0 1.642 npm info using node@v18.7.0
#0 1.642 npm timing npm:load:whichnode Completed in 0ms
#0 1.643 npm timing config:load:defaults Completed in 2ms
#0 1.643 npm timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 5ms
#0 1.643 npm timing config:load:builtin Completed in 6ms
#0 1.643 npm timing config:load:cli Completed in 1ms
#0 1.644 npm timing config:load:env Completed in 1ms
#0 1.644 npm timing config:load:file:/usr/bin/smap/.npmrc Completed in 2ms
#0 1.644 npm timing config:load:project Completed in 5ms
#0 1.644 npm timing config:load:file:/root/.npmrc Completed in 0ms
#0 1.644 npm timing config:load:user Completed in 1ms
#0 1.645 npm timing config:load:file:/usr/local/etc/npmrc Completed in 6ms
#0 1.645 npm timing config:load:global Completed in 6ms
#0 1.645 npm timing config:load:validate Completed in 2ms
#0 1.645 npm timing config:load:credentials Completed in 1ms
#0 1.645 npm timing config:load:setEnvs Completed in 1ms
#0 1.645 npm timing config:load Completed in 28ms
#0 1.645 npm timing npm:load:configload Completed in 28ms
#0 1.645 npm timing npm:load:mkdirpcache Completed in 1ms
#0 1.645 npm timing npm:load:mkdirplogs Completed in 1ms
#0 1.645 npm timing npm:load:setTitle Completed in 1ms
#0 1.646 npm timing config:load:flatten Completed in 2ms
#0 1.646 npm timing npm:load:display Completed in 9ms
#0 1.653 npm timing npm:load:logFile Completed in 7ms
#0 1.653 npm timing npm:load:timers Completed in 0ms
#0 1.654 npm timing npm:load:configScope Completed in 0ms
#0 1.656 npm timing npm:load Completed in 50ms
#0 1.667
#0 1.667 > build
#0 1.667 > nuxt build
#0 1.667
#0 1.675 /tmp/build-27aedcc8.sh: 1: nuxt: not found
#0 1.677 npm timing command:run Completed in 15ms
#0 1.678 npm timing npm Completed in 74ms
------
failed to solve: executor failed running [/bin/sh -c npm run build]: exit code: 127

Answer 1

when installing npm dependencies, just add --production=false flag to that. so it should be like this:

RUN npm install --production=false

Answer 2

I had the same error because my Docker was setup incorrectly, resulting in an empty node_modules folder inside the container.

Specifically, my docker-compose.yml had a typical volume mapping as so:

  frontend:
    volumes:
      - ./frontend:/app

If you have not ran yarn or npm install locally, this will cause your local directory to overwrite the container's directory, replacing its node_modules with an empty folder, and therefore not finding nuxt as a command.

Fix this by using a named volume instead:

  frontend:
    volumes:
      - ./frontend:/app
      - node_modules:/app/node_modules

You retain the volume mapping so you get things like hot-reloading, but it will effectively "exclude" node_modules from being mapped. It also names the volume so it's identifiable in your Docker volumes list.

Credits:

• @David Maze for pointing out the root issue and providing a solution.
• @Nate T for the idea to use named volumes.

Answer 3

Sooo, this was kind of a dummy moment from me. Thanks to this comment I was able to solve the issue. On my dockerfile I had this line of code COPY .npmrc package.json sdx ./. Sdx is an internal package of my company and in this project I use it to test some new features that still are in development in production mode, thats why the docker container. This package of course has a package.json and this one overwrote my package.json. I simply removed the sdx from the COPY command and made a new COPY for sdx the line after. COPY ./sdx ./sdx.