Error with hot reloading and "-d": "SyntaxError: missing ) after argument list"

[alvaro-cuesta]

This is style-loader@~0.8.0. My *.styl loader looks like this: { test: /\.styl$/, loader: 'style!css!stylus' }.

The offending lines (specifically the one with module.hot.accept):

if(true) {
    // When the styles change, update the <style> tags
    module.hot.accept(/*! !../~/css-loader!../~/stylus-loader!./viewer.styl */ 2/*! !../~/css-loader!../~/stylus-loader!./viewer.styl */ 2, function() {
        var newContent = __webpack_require__(/*! !../~/css-loader!../~/stylus-loader!./viewer.styl */ 2);
        if(typeof newContent === 'string') newContent = [module.id, newContent, ''];
        update(newContent);
    });
    // When the module is disposed, remove the <style> tags
    module.hot.dispose(function() { update(); });
}

[sokra]

huh?... Looks like an webpack bug... :(

[alvaro-cuesta]

Narrowed it down to using --output-pathinfo. Took a dive into style-loader and the code looks exactly like the next line (

style-loader/index.js

Lines 20 to 21 in 8ec1dc6

	" module.hot.accept(" + JSON.stringify("!!" + remainingRequest) + ", function() {",
	" var newContent = require(" + JSON.stringify("!!" + remainingRequest) + ");",

) but the output is different.

Happens both with vanilla webpack and dev-server.

Definitely a webpack bug, I guess.

[sokra]

Try to repoduce it, but with no success. It doesn't occur for me.

Could you please create a repro repo?

[alvaro-cuesta]

Here's the repo: https://github.com/alvaro-cuesta/webpack-bug

npm install
npm start

Then go to http://localhost:8080/webpack-dev-server/bug and check the browser console.

SyntaxError: missing ) after argument list

[sokra]

ah ok... you applied the HotModuleReplacementPlugin twice. 1. with --hot and 2. in plugins.

[alvaro-cuesta]

Woopsies, I'm sorry, thought --hot only added webpack/hot/dev-server.

[chosenvictim]

I am having the same issue, here is my webpack configuration:-

var webpack             = require('webpack');
var HtmlWebpackPlugin   = require('html-webpack-plugin');

module.exports = {
    devtool: 'cheap-module-eval-source-map',

    entry: {
        app: [
            'webpack-dev-server/client?http://localhost:8080',
            'webpack/hot/dev-server',
            './src/index.js',
        ],
        vendor: [
            'react',
            'react-dom',
        ],
    },

    output: {
        path: __dirname,
        pathinfo: true,
        filename: 'app.js',
        publicPath: '/',
    },

    resolve: {
        extensions: ['', '.js', '.jsx'],
        modules: [
            'src',
            'node_modules',
        ],
    },

    devServer: {
        stats: 'errors-only'
    },

    module: {
        loaders: [
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            }, {
                test: /\.jsx?$/,
                exclude: [/node_modules/, /.+\.config.js/],
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }, {
                test: /\.(jpe?g|gif|png|svg)$/i,
                loader: 'url-loader?limit=10000'
            }, {
                test: /\.json$/,
                loader: 'json-loader'
            },
        ],
    },

    plugins: [
        // Generates an `index.html` file with the <script> injected.
        new HtmlWebpackPlugin({
            inject: true,
            template: 'index.html',
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: Infinity,
            filename: 'vendor.js',
        }),
        new webpack.DefinePlugin({
            'process.env': {
            CLIENT: JSON.stringify(true),
            'NODE_ENV': JSON.stringify('development'),
            }
        }),
    ]
};

And in the index.js, I am importing it as:-
import './index.scss'

index.scss file:-
body { margin: 0; background: cornsilk; }