TypeError: Object(...) is not a function when mounting a volume from the local directory into a next.js container

Question

I'm trying to mount a volume from my local directory for Next.js/React's hot reload during development. My current docker-compose.development.yml looks like this:

services:
  web:
    command: next dev
    volumes:
      - ./:/usr/src/app
      - /usr/src/app/node_modules
      - /usr/src/app/.next
    depends_on:
      db:
        condition: service_healthy

It extends my main docker-compose with the command docker-compose -f docker-compose.yml -f docker-compose.development.yml up --build:

services:
  web:
    build: .
    command: /bin/sh -c 'npm run build && npm start'
    ports:
      - 3000:3000
      - 5432:5432
    env_file:
      - .env.local

It works fine without the development overrides and without docker. I believe this problem has to do with running next dev in a container as the problem persists even after removing the volume bindings. Here is the full call stack. It points to the error being in the src/pages/_app.tsx file.

Answer 1

This are the basic steps to troubleshoot an issue when you can build your project in one environment and you are not able to do it in another.

• Make sure the npm install was run before the build starts.

  I can not see from the shared snippets you have shared if this was done. To build in the container you need to have the dependancies installed.

• Make sure that your package.json is up to date with the versions of the packages/modules that are installed in the development environment.

  If you don't have the package.json or it was not maintained you can check in this SO post how to generate it again.

• Next to check is the C/C++ build environment. some of the modules require C/C++ or C#/mongo to build environments to be present in the image. Also, most often there will be requirement for specific dev shared libraries to be installed.

  Check which dependancies are required for your packages and which libraries are required to be installed in the OS for the modules to work.

• Finally, some modules are OS dependent (ex. work only on Windows, or only on macOS), or architecture dependent (amd64, arm64, etc.)

  Ream the information about the package/module and research it on internet. If you have such modules, you will face challenges to package them in a container, so best approach here is to refactor them out from your project before you can containerize it.

Answer 2

I had NODE_ENV set to production instead of development in my Dockerfile. I assume it was conflicting with one of the steps for hot reloading.