N
Nuxt•3y ago
Carson

Docker Compose Container Setup - Module not found error

I'm trying to get Nuxt 3 set up in a docker environment. Ultimately, I'd like to get live-reload working for development. For now, I can't even access any webpages without getting a 500: Cannot read properties of undefined (reading 'modules') error. I'll post code below. The Nuxt build is basically a fresh install. The docker setup is a little unique, but I believe there aren't any routing problems. I'll post code below:
2 Replies
Carson
CarsonOP•3y ago
# docker-compose.yaml
services:
  ...
app:
    container_name: "app"
    image: "echo/app:latest-dev"
    build: 
      context: "./app/src"
      dockerfile: "./Dockerfile
    restart: "always"
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.app.rule=Host(`${APP_SUBDOMAIN}.$HOSTNAME`)"
      - "traefik.http.routers.app.entrypoints=web"
      - "traefik.tcp.services.app.loadbalancer.server.port=${APP_PORT}"
    networks:
      - "proxy"
    ports:
      - "${APP_PORT}:${APP_PORT}"
      - "24678:24678"
    volumes:
      - "app_node_modules:/usr/src/nuxt/src/node_modules"
    profiles:
      - "full"
      - "cloud"
      - "app"
    depends_on:
      - "proxy"
      - "s3"
      - "api"
    environment:
      - "PORT=${APP_PORT}"
      - "NUXT_PORT=${APP_PORT}"
      - "HOST=0.0.0.0"
      - "NUXT_HOST=0.0.0.0"
volumes:
  ...
  app_node_modules: {}
# docker-compose.yaml
services:
  ...
app:
    container_name: "app"
    image: "echo/app:latest-dev"
    build: 
      context: "./app/src"
      dockerfile: "./Dockerfile
    restart: "always"
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.app.rule=Host(`${APP_SUBDOMAIN}.$HOSTNAME`)"
      - "traefik.http.routers.app.entrypoints=web"
      - "traefik.tcp.services.app.loadbalancer.server.port=${APP_PORT}"
    networks:
      - "proxy"
    ports:
      - "${APP_PORT}:${APP_PORT}"
      - "24678:24678"
    volumes:
      - "app_node_modules:/usr/src/nuxt/src/node_modules"
    profiles:
      - "full"
      - "cloud"
      - "app"
    depends_on:
      - "proxy"
      - "s3"
      - "api"
    environment:
      - "PORT=${APP_PORT}"
      - "NUXT_PORT=${APP_PORT}"
      - "HOST=0.0.0.0"
      - "NUXT_HOST=0.0.0.0"
volumes:
  ...
  app_node_modules: {}
# ./Dockerfile
FROM node:18-alpine

RUN mkdir -p /usr/src/nuxt/src

WORKDIR /usr/src/nuxt/src

# COPY ./package*.json ./
COPY ./package.json ./

RUN pwd && ls -la . && cat package.json

RUN npm install && npm cache clean --force

COPY . .

RUN pwd && ls -la . && cat package.json

ENV PATH ./node_modules/.bin/:$PATH

CMD ["npm", "run", "dev"]
# ./Dockerfile
FROM node:18-alpine

RUN mkdir -p /usr/src/nuxt/src

WORKDIR /usr/src/nuxt/src

# COPY ./package*.json ./
COPY ./package.json ./

RUN pwd && ls -la . && cat package.json

RUN npm install && npm cache clean --force

COPY . .

RUN pwd && ls -la . && cat package.json

ENV PATH ./node_modules/.bin/:$PATH

CMD ["npm", "run", "dev"]
// ./package.json
{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "^3.0.0"
  },
  "dependencies": {
    "vue": "^3.2.45"
  }
}
// ./package.json
{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "^3.0.0"
  },
  "dependencies": {
    "vue": "^3.2.45"
  }
}
I spin up the container with docker-compose build --no-cache app && docker-compose --profile app up, and the Nuxt server starts up. Upon visiting http://app.echo.io/, 10.0.0.11:4444, and localhost:4444 (all of which route to the Nuxt app), I get this: 
app      | [Vue warn]: inject() can only be used inside setup() or functional components.
app      | [Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.
app      | [Vue warn]: Unhandled error during execution of setup function 
app      |   at <NuxtRoot>
app      | [nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'modules')
app      |   at _sfc_main.setup (./node_modules/nuxt/dist/app/components/nuxt-root.vue:67:16)  
app      |   at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22)  
app      |   at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7176:29)  
app      |   at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7131:11)  
app      |   at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:172:17)  
app      |   at renderToString (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:450:26)  
app      |   at Object.renderToString$1 [as renderToString] (./.nuxt/dev/index.mjs:570:24)  
app      |   at Object.renderToString (./node_modules/vue-bundle-renderer/dist/runtime.mjs:173:40)  
app      |   at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
app      |   at async ./.nuxt/dev/index.mjs:630:21
app      | [Vue warn]: inject() can only be used inside setup() or functional components.
app      | [Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.
app      | [Vue warn]: Unhandled error during execution of setup function 
app      |   at <NuxtRoot>
app      | [nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'modules')
app      |   at _sfc_main.setup (./node_modules/nuxt/dist/app/components/nuxt-root.vue:67:16)  
app      |   at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22)  
app      |   at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7176:29)  
app      |   at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7131:11)  
app      |   at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:172:17)  
app      |   at renderToString (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:450:26)  
app      |   at Object.renderToString$1 [as renderToString] (./.nuxt/dev/index.mjs:570:24)  
app      |   at Object.renderToString (./node_modules/vue-bundle-renderer/dist/runtime.mjs:173:40)  
app      |   at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
app      |   at async ./.nuxt/dev/index.mjs:630:21
Carson
CarsonOP•3y ago
I am at a complete loss. I've tried so many variations on the docker-compose setup, the Dockerfile, routing, etc. I've read here (https://github.com/nuxt/framework/issues/7220) and here (https://github.com/nuxt/framework/issues/7609) Anyone got any ideas?
GitHub
Cannot read properties of undefined (reading 'modules') · Issue #72...
Environment Operating System: Darwin Node Version: v16.14.0 Nuxt Version: 3.0.0-rc.9 Nitro Version: 0.5.0 Package Manager: [email protected] Builder: vite User Config: - Runtime Modules: - Build Modules: -...
GitHub
[RC 9] [RC 10] `Cannot read properties of undefined (reading 'modul...
Related issues #7532 #7220 #7573 #7564 sidebase/sidebase#16 Reproduction Minimal reproduction: https://stackblitz.com/edit/github-2yn1ze?file=app%2Fpackage.json,app%2Fnuxt.config.ts Describe the bu...

Did you find this page helpful?