Home>

A simple react application is created withwebpackwithout using create-react-app.
I enabled this app to run onDocker, but it fails with the following error.

Error message
~/hospital master *
❯ docker-compose up
Starting hospital_client_1 ... done
Attaching to hospital_client_1
client_1 |
client_1 |>[email protected] start/app
client_1 |>webpack-dev-server --mode = development "0.0.0.0" "3000"
client_1 |
client_1 | /app/node_modules/webpack-cli/bin/utils/convert-argv.js:547
client_1 | const i = content.indexOf ("=");
client_1 | ^
client_1 |
client_1 | TypeError: content.indexOf is not a function
client_1 | at /app/node_modules/webpack-cli/bin/utils/convert-argv.js:547:23
client_1 | at Array.forEach ()
client_1 | at processOptions (/app/node_modules/webpack-cli/bin/utils/convert-argv.js:546:11)
client_1 | at processConfiguredOptions (/app/node_modules/webpack-cli/bin/utils/convert-argv.js:170:4)
client_1 | at module.exports (/app/node_modules/webpack-cli/bin/utils/convert-argv.js:131:10)
client_1 | at Object.  (/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:40)
client_1 | at Module._compile (internal/modules/cjs/loader.js: 777: 30)
client_1 | at Object.Module._extensions..js (internal/modules/cjs/loader.js: 788: 10)
client_1 | at Module.load (internal/modules/cjs/loader.js: 643: 32)
client_1 | at Function.Module._load (internal/modules/cjs/loader.js: 556: 12)
client_1 | npm ERR! code ELIFECYCLE
client_1 | npm ERR! errno 1
client_1 | npm ERR! [email protected] start: `webpack-dev-server --mode = development" 0.0.0.0 "" 3000 "`
client_1 | npm ERR! Exit status 1
client_1 | npm ERR!
client_1 | npm ERR! Failed at the [email protected] start script.
client_1 | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
client_1 |
client_1 | npm ERR! A complete log of this run can be found in:
client_1 | npm ERR! /root/.npm/_logs/2019-12-02T13_52_45_192Z-debug.log
hospital_client_1 exited with code 1
Applicable source code
hospital
  ├ client
  │ ├ src
  │ │ ├ components
  │ │ │ └ Demo.tsx
  │ │ ├ App.tsx
  │ │ ├ index.html
  │ │ └ index.tsx
  │ ├ Dockerfile
  │ ├ package.json
  │ └ webpack.config.js
  └ docker-compose.yml

Dockerfile

FROM node: alpine
WORKDIR '/ app'
COPY ./package.json ./
RUN npm install
COPY.
EXPOSE 3000
RUN npm start

docker-compose.yml

version: '3'
services:
  client:
    command: 'npm start --host 0.0.0.0 --port 3000'
    build:
      dockerfile: Dockerfile
      context: ./client
    ports:
      -'3000: 3000'
    volumes:
      -/ app/node_modules
      -./client:/app

webpack.config.js

const path = require ('path');
const HtmlWebpackPlugin = require ('html-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    path: path.resolve (__ dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: '3000',
    hot: true,
    open: true,
  },
  module: {
    rules: [
      {
        test: /\.js(x?)$/,
        loader: 'babel-loader',
        exclude:/node_modules /,
      },
      {
        test: /\.ts(x?)$/,
        loader: 'ts-loader',
        exclude:/node_modules /,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin ({
      template: './src/index.html',
    }),
  ],
  resolve: {
    extensions: ['.js', '.ts', '.tsx'],
  },
};

package.json

"scripts": {
    "test": "echo \" Error: no test specified \ "&&exit 1",
    "dev": "webpack-dev-server",
    "start": "webpack-dev-server --mode = development"
  },

The whole source code is below.
https://github.com/jpskgc/hospital

Start withnpm startwithout any problem in the local environment.

  • Answer # 1

    The problem has been resolved with the following modifications.
    Source: https://stackoverflow.com/questions/59141778/fail-to-run-react-application-on-docker/59154209#59154209

    Dockerfile

    FROM node: alpine
    RUN mkdir -p/app
    COPY./App
    WORKDIR/app
    RUN npm install
    EXPOSE 3000/tcp
    CMD ["npm", "start"]


    docker-compose.yml

    version: '3'
    services:
      client:
        build:
          dockerfile: Dockerfile
          context: ./client
        ports:
          -'3000: 3000'
        volumes:
          -./client:/app


    package.json

    {
      "name": "client",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \" Error: no test specified \ "&&exit 1",
        "dev": "webpack-dev-server",
        "build": "webpack --mode development",
        "start": "webpack-dev-server --mode development --host 0.0.0.0 --port 3000"
      },
      ...
    }