Trying to use webpack-dev-server in container, getting errors that are not there otherwise

I am new to both react, webpack and docker. Trying to start a webpack-dev-server in a container. It’s starting all right when I am doing it from the terminal, but trying to start it from docker is giving me this error.

ERROR in ./~/react-select/dist/react-select.css
Module parse failed: /usr/src/app/node_modules/react-select/dist/react-select.css Unexpected token (8:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (8:0)
    at Parser.pp$4.raise (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/usr/src/app/node_modules/webpack/lib/Parser.js:902:15)
    at NormalModule.<anonymous> (/usr/src/app/node_modules/webpack/lib/NormalModule.js:104:16)
    at NormalModule.onModuleBuild (/usr/src/app/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
 @ ./ui/src/components/select2Field.js 17:0-45

ERROR in ./~/react-quill/dist/quill.snow.css
Module parse failed: /usr/src/app/node_modules/react-quill/dist/quill.snow.css Unexpected token (7:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:0)
    at Parser.pp$4.raise (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/usr/src/app/node_modules/webpack/lib/Parser.js:902:15)
    at NormalModule.<anonymous> (/usr/src/app/node_modules/webpack/lib/NormalModule.js:104:16)
    at NormalModule.onModuleBuild (/usr/src/app/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
 @ ./ui/src/components/react-intl-input/quill.js 19:0-42

ERROR in ./~/react-telephone-input/css/default.css
Module parse failed: /usr/src/app/node_modules/react-telephone-input/css/default.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/usr/src/app/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/usr/src/app/node_modules/webpack/lib/Parser.js:902:15)
    at NormalModule.<anonymous> (/usr/src/app/node_modules/webpack/lib/NormalModule.js:104:16)
    at NormalModule.onModuleBuild (/usr/src/app/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
 @ ./~/react-telephone-input/lib/withStyles.js 2:0-29

My webpack-config

  • Google push-to-deploy jenkins image fails after reboot
  • Gitlab CI runner not able to expose ports of nested Docker containers
  • Recommend way to Artisan on Docker
  • Why does Tensorflow have notebook encryption warnings when trying to run the standard tensorflow docker image without the bash command?
  • Getting a “A blocking operation was interrupted by a call to WSACancelBlockingCall” error when consuming Shipyard API using RestSharp
  • When I run the image on my PC for Docker, I got below error all the time
  • const webpack = require('webpack');
    const path = require('path');
    const loaders = require('./webpack.loaders');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const DashboardPlugin = require('webpack-dashboard/plugin');
    const config = require('./config');
    
    const entryPathBase = `${config.ui.assets.directory}/scripts`;
    const stylePath = `${config.ui.assets.directory}/stylesheets`;
    const outputPathBase = config.static.directory;
    
    const HOST = process.env.HOST || "127.0.0.1";
    const PORT = config.port;
    
    // global css
    loaders.push({
        test: /\.css$/,
        exclude: /[\/\\]src[\/\\]/,
        loader: ExtractTextPlugin.extract('style', 'css')
    });
    // local scss modules
    loaders.push({
        test: /\.scss$/,
        exclude: /[\/\\](node_modules|bower_components|public\/)[\/\\]/,
        loader: ExtractTextPlugin.extract('style', `css!sass?includePaths[]=${path.resolve(stylePath)}`)
    });
    
    // local css modules
    loaders.push({
        test: /\.css$/,
        exclude: /[\/\\](node_modules|bower_components|public\/)[\/\\]/,
        loader: ExtractTextPlugin.extract('style',
            'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
    });
    
    module.exports = {
        entry: [
            'react-hot-loader/patch',
            `${entryPathBase}/app.js`
        ],
        devtool: process.env.WEBPACK_DEVTOOL || 'eval-source-map',
        output: {
            publicPath: '/',
            path: outputPathBase,
            filename: 'app.js'
        },
        resolve: {
            extensions: ['', '.js', '.jsx']
        },
        module: {
            loaders
        },
        devServer: {
            contentBase: './public',
            // do not print bundle build stats
            noInfo: true,
            // enable HMR
            hot: true,
            // embed the webpack-dev-server runtime into the bundle
            inline: true,
            // serve index.html in place of 404 responses to allow HTML5 history
            disableHostCheck: true,
            historyApiFallback: true,
            port: PORT,
            host: HOST
        },
        plugins: [
            new webpack.NoErrorsPlugin(),
            new webpack.HotModuleReplacementPlugin(),
            new DashboardPlugin(),
            new ExtractTextPlugin('app.css', {
                allChunks: true
            }),
            new HtmlWebpackPlugin({
                template: './dev.html'
            })
        ]
    };
    

    webpack.loaders.js

    module.exports = [
        {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components|public\/)/,
            loader: "babel"
        },
        {
            test: /\.json$/,
            loader: 'json'
        },
        {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            exclude: /(node_modules|bower_components)/,
            loader: "file"
        },
        {
            test: /\.(woff|woff2)$/,
            exclude: /(node_modules|bower_components)/,
            loader: "url?prefix=font/&limit=5000"
        },
        {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            exclude: /(node_modules|bower_components)/,
            loader: "url?limit=10000&mimetype=application/octet-stream"
        },
        {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            exclude: /(node_modules|bower_components)/,
            loader: "url?limit=10000&mimetype=image/svg+xml"
        },
        {
            test: /\.gif/,
            exclude: /(node_modules|bower_components)/,
            loader: "url-loader?limit=10000&mimetype=image/gif"
        },
        {
            test: /\.jpg/,
            exclude: /(node_modules|bower_components)/,
            loader: "url-loader?limit=10000&mimetype=image/jpg"
        },
        {
            test: /\.png/,
            exclude: /(node_modules|bower_components)/,
            loader: "url-loader?limit=10000&mimetype=image/png"
        }
    ];
    

    Dockerfile

    FROM node:8.1.2
    RUN rm -rf /usr/src/app
    RUN mkdir -p /usr/src/app
    WORKDIR /usr/src/app
    
    # ENV NODE_ENV development
    COPY . /usr/src/app
    RUN npm install
    RUN npm run njs-install
    
    EXPOSE 3003
    
    CMD ["npm", "start"]
    

    Any idea what could be causing this?

    Full error https://pastebin.com/5AhKXk6F

  • Remote access to webserver in docker container
  • Docker CMD weirdness when ENTRYPOINT is a shell script
  • Docker image with specific node version
  • Docker vs Vagrant
  • Cassandra container with --net=host exits immediately
  • Docker: Which approach is better? WAR embedded in image or base image + war?
  • Docker will be the best open platform for developers and sysadmins to build, ship, and run distributed applications.