Runtime Error WEBPACK_IMPORTED_MODULE while using NextJS App in Docker

  docker, elasticsearch, next.js, node.js, webpack

I have a strange problem setting up a NextJS app with Searchkit in a docker container. Everything is running fine locally, but containerized is not possible.

Locally. No Problem.

  1. Clone this repo: https://github.com/searchkit/searchkit/tree/next/examples/next-demo
  2. Switch to /next-demo
  3. Delete .next and .node-modules
  4. yarn and yarn start spins up a nodejs server at http://localhost:3000

Make sure to have a proper Elasticsearch with a matching index running and everything is fine!

Containerized. Webpack Error!

Now, if I set this up in a docker container, I get an error.
For debugging I set it up with the same NodeJS Version like my local system.

/inside-docker # node -v
v14.16.1
/inside-docker # npm -v
6.14.12
/inside-docker # yarn -v
1.22.5
/inside-docker # 

local-system:~$ node -v
v14.16.1
local-system:~$ npm -v
6.14.12
local-system:~$ yarn -v
1.22.10
local-system:~$ 
  1. I was using a simple dockerfile
FROM node:14.16.1-alpine3.13
ENV NODE_ENV production
WORKDIR /app
EXPOSE 3000
  1. Copy all content from /next-demo to docker container using docker cp. (Again, for simplicity, you can use Dockerfile for this)

  2. Make sure the container can reach Elasticsearch. In my setup Elasticsearch is in a different container sharing a Docker Bridge Network with the container.

  3. Attach a shell to the container and type yarn and yarn start. It spins up a nodejs server at http://localhost:3000

Opening the URL in a browser destroys the app 🙁 :

TypeError: (0 , react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV) is not a function

I don’t understand why webpack has problems at runtime with the exact same code in a nearly same enviroment. Any tipps, hints and suggestions are highly appreciated.

Here’s a screenshot of the error message: Imgur Link to Error Message

I checked that the app can reach Elasticsearch via:

/inside-docker # curl http://172.17.0.2:9200/_cat/health?v
epoch      timestamp cluster        status node.total node.data shards pri relo init unassign pending_tasks max_task_wait_time active_shards_percent
1621423468 11:24:28  docker-cluster yellow          1         1     20  20    0    0       11             0                  -                 64.5%

Source: Docker Questions

LEAVE A COMMENT