Docker build gets stuck web running: 'RUN npx webpack' -- doesn't move to next step in dockerfile

Question

I am trying to build my project into a container for Docker with the following dockerfile:

FROM node:10
WORKDIR /usr/app/battlejong
COPY client ./client
COPY BattleJongServer ./BattleJongServer
WORKDIR /usr/app/battlejong/client
RUN npm install
RUN npx webpack
WORKDIR /usr/app/battlejong/BattleJongServer
RUN npm install
RUN npx tsc
EXPOSE 80
CMD ["node","./dist/main.js"]

The docker build runs and completes the webpack step but does not continue onto the next step of changing the directory.

Here is the output here:

Step 1/12 : FROM node:10
 ---> 1e318dc8ae6f
Step 2/12 : WORKDIR /usr/app/battlejong
 ---> Using cache
 ---> c004d781a932
Step 3/12 : COPY client ./client
 ---> 955204bda599
Step 4/12 : COPY BattleJongServer ./BattleJongServer
 ---> 6c692d4c4bad
Step 5/12 : WORKDIR /usr/app/battlejong/client
 ---> Running in 662e29660e6c
Removing intermediate container 662e29660e6c
 ---> 3ce3c61bf582
Step 6/12 : RUN npm install
 ---> Running in 808724a44e9b
npm WARN client@1.0.0 No description
npm WARN client@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 678 packages from 430 contributors and audited 684 packages in 12.37s

29 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Removing intermediate container 808724a44e9b
 ---> 0dc996f51895
Step 7/12 : RUN npx webpack
 ---> Running in bd591d5fc8f8

webpack is watching the files…

ℹ ｢atl｣: Using typescript@4.0.2 from typescript
ℹ ｢atl｣: Using tsconfig.json from /usr/app/battlejong/client/tsconfig.json
ℹ ｢atl｣: Checking started in a separate process...
ℹ ｢atl｣: Time: 1712ms
Hash: 99e556545c8a1a30d23c
Version: webpack 4.44.1
Time: 9256ms
Built at: 09/15/2020 12:10:54 AM
       Asset       Size  Chunks                          Chunk Names
./index.html  241 bytes          [emitted]               
     main.js    276 KiB       0  [emitted]        [big]  main
 main.js.map    508 KiB       0  [emitted] [dev]         main
Entrypoint main [big] = main.js main.js.map
 [4] ./src/code/main.tsx 550 bytes {0} [built]
 [7] ./src/css/main.css 524 bytes {0} [built]
 [8] ./node_modules/css-loader/dist/cjs.js!./src/css/main.css 3.39 KiB {0} [built]
[17] ./src/img/tile101.png 5.59 KiB {0} [built]
[18] ./src/img/tile102.png 3.15 KiB {0} [built]
[19] ./src/img/tile103.png 2.58 KiB {0} [built]
[20] ./src/img/tile104.png 1.14 KiB {0} [built]
[21] ./src/img/tile105.png 2.39 KiB {0} [built]
[22] ./src/img/tile106.png 2.1 KiB {0} [built]
[23] ./src/img/tile107.png 3.49 KiB {0} [built]
[24] ./src/img/tile108.png 2.53 KiB {0} [built]
[25] ./src/img/tile109.png 2.53 KiB {0} [built]
[26] ./src/img/tile110.png 2.29 KiB {0} [built]
[27] ./src/img/tile111.png 1.58 KiB {0} [built]
[59] ./src/code/state.tsx 12.9 KiB {0} [built]
    + 46 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 287 bytes {0} [built]

And then the build doesn't proceed from here onto line/step 8 in the dockerfile and will sit here until I force stop the build.

Here is my package.json as well:

  {
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "npx webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^16.9.44",
    "@types/react-dom": "^16.9.8",
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^4.2.2",
    "html-loader": "^1.3.0",
    "html-webpack-plugin": "^4.4.1",
    "style-loader": "^1.2.1",
    "typescript": "^4.0.2",
    "url-loader": "^4.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "mode": "production",
  "dependencies": {
    "normalize.css": "^8.0.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

I have been following a tutorial and their dockerfile is the same as well, so any tips would be greatly appreciated!

Answer 1

As David Maze suggested, webpack is watching the files… is suspicious. In our case, someone had added watch: true to webpack.config.js.