Uncaught SyntaxError: missing ) after argument list #573

New Issue

fergalmoran · 2025-08-09T17:16:48Z

fergalmoran commented

2025-08-09 17:16:48 +00:00

Originally created by @AuthorProxy on 7/18/2017

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
    HotModuleReplacement = true
});

{
  "scripts": {
    "serve:prod": "babel-node server.js --env=prod",
    "build-vendor:prod": "webpack -p --env=prod --progress --profile --colors --config webpack.config.vendor.js",
    "build-dist:prod": "webpack -p --env=prod --progress --profile --colors",
    "build:prod": "npm run build-vendor:prod && npm run build-dist:prod",
    "start:prod": "npm run build:prod && npm run serve:prod",
    "serve": "babel-node server.js --env=dev",
    "build-vendor": "webpack --env=dev --progress --profile --colors --display-error-details --config webpack.config.vendor.js",
    "build-dist": "webpack --env=dev --progress --profile --colors --display-error-details",
    "build": "npm run build-vendor && npm run build-dist",
    "start": "npm run build && npm run serve"
  },
  "devDependencies": {
    "aspnet-webpack": "^2.0.1",
    "babel-cli": "^6.24.1",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "cross-env": "^5.0.1",
    "css-loader": "^0.28.4",
    "css-mqpacker": "^6.0.1",
    "cssnano": "^3.10.0",
    "doiuse": "^3.0.0",
    "eslint": "^4.2.0",
    "eslint-config-airbnb": "^15.0.2",
    "eslint-loader": "^1.8.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.1.0",
    "express": "^4.15.3",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "minimist": "^1.2.0",
    "postcss-browser-reporter": "^0.5.0",
    "postcss-cssnext": "^3.0.0",
    "postcss-import": "^10.0.0",
    "postcss-loader": "^2.0.6",
    "postcss-reporter": "^4.0.0",
    "postcss-url": "^7.0.0",
    "precss": "^2.0.0",
    "style-loader": "^0.18.2",
    "stylelint": "^7.12.0",
    "stylelint-config-standard": "^16.0.0",
    "url-loader": "^0.5.9",
    "webpack": "^3.0.0",
    "webpack-dev-middleware": "^1.11.0",
    "webpack-dev-server": "^2.5.0",
    "webpack-hot-middleware": "^2.18.1",
    "webpack-notifier": "^1.5.0"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "bootstrap": "^3.3.7",
    "font-awesome": "^4.7.0",
    "normalize.css": "^7.0.0",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-addons-css-transition-group": "^15.6.0",
    "react-dom": "^15.6.1",
    "react-hot-loader": "^3.0.0-beta.7",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1"
  },
  "-vs-binding": {
    "ProjectOpened": [
      "install"
    ]
  }
}

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const dllManifest = require('./wwwroot/vendor-manifest.json');

const bundleOutputDir = './wwwroot';

module.exports = (env) => {
  const isDevBuild = !(env && env.prod);
  const NODE_ENV = isDevBuild ? 'development' : 'production';

  // eslint-disable-next-line no-console
  console.log(`Run webpack with NODE_ENV=${NODE_ENV}`);

  const extractCSS = new ExtractTextPlugin('site.css');
  return [{
    cache: isDevBuild,
    resolve: { extensions: ['.js', '.jsx'] },
    entry: { main: './app/index' },
    output: {
      path: path.join(__dirname, bundleOutputDir),
      filename: '[name].js',
      publicPath: '/'
    },
    module: {
      rules: [{
        enforce: 'pre',
        test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          failOnError: true
        }
      }, {
        test: /\.(js|jsx)?$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }, {
        test: /\.css$/,
        use: isDevBuild ? ['style-loader', {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        }, 'postcss-loader'] : ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [{
            loader: 'css-loader?minimize',
            options: {
              importLoaders: 1
            }
          }, 'postcss-loader']
        })
      }, {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        use: 'url-loader?limit=25000'
      }, {
        test: /\.html$/,
        use: 'file-loader?name=[name].[ext]&outputPath=/'
      }]
    },
    plugins: [
      new WebpackNotifierPlugin(),
      new webpack.DefinePlugin({
        'process.env': {
          ENV: JSON.stringify(NODE_ENV),
          NODE_ENV: JSON.stringify(NODE_ENV)
        }
      }),
      new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: dllManifest
      })

    ].concat(isDevBuild ? [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
      new webpack.SourceMapDevToolPlugin({
        filename: '[file].map',
        moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]')
      })
    ] : [
      extractCSS,
      new webpack.optimize.UglifyJsPlugin({
        ie8: false,
        warnings: false,
        mangle: {
          screw_ie8: true,
          keep_fnames: true
        },
        compress: {
          screw_ie8: true,
          warnings: false
        }
      })
    ])
  }];
};

Error at chrome sources panel

...
// import React from 'react';
// import ReactDOM from 'react-dom';
// import { AppContainer } from 'react-hot-loader';
// import { BrowserRouter as Router } from 'react-router-dom';

// import App from './components/App';
// import ScrollToTop from './components/Helpers/ScrollToTop';

// const render = (Component) => {
//   ReactDOM.render(
//     <AppContainer>
//       <Router>
//         <ScrollToTop>
//           <Component />
//         </ScrollToTop>
//       </Router>
//     </AppContainer>,
//     document.getElementById('root')
//   );
// };

// render(App);
if (true) {
  module.hot.accept("./app/components/App.js""./app/components/App.js", function () {
    console.log('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX updated');
  });
}
;
...

Why it convert to "./app/components/App.js""./app/components/App.js".

When I remove HotModuleReplacement = true from startup everything works (except hmr).

*Originally created by @AuthorProxy on 7/18/2017* ```C# app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true }); ``` ```json { "scripts": { "serve:prod": "babel-node server.js --env=prod", "build-vendor:prod": "webpack -p --env=prod --progress --profile --colors --config webpack.config.vendor.js", "build-dist:prod": "webpack -p --env=prod --progress --profile --colors", "build:prod": "npm run build-vendor:prod && npm run build-dist:prod", "start:prod": "npm run build:prod && npm run serve:prod", "serve": "babel-node server.js --env=dev", "build-vendor": "webpack --env=dev --progress --profile --colors --display-error-details --config webpack.config.vendor.js", "build-dist": "webpack --env=dev --progress --profile --colors --display-error-details", "build": "npm run build-vendor && npm run build-dist", "start": "npm run build && npm run serve" }, "devDependencies": { "aspnet-webpack": "^2.0.1", "babel-cli": "^6.24.1", "babel-eslint": "^7.2.3", "babel-loader": "^7.1.1", "babel-preset-env": "^1.6.0", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "cross-env": "^5.0.1", "css-loader": "^0.28.4", "css-mqpacker": "^6.0.1", "cssnano": "^3.10.0", "doiuse": "^3.0.0", "eslint": "^4.2.0", "eslint-config-airbnb": "^15.0.2", "eslint-loader": "^1.8.0", "eslint-plugin-import": "^2.7.0", "eslint-plugin-jsx-a11y": "^6.0.2", "eslint-plugin-react": "^7.1.0", "express": "^4.15.3", "extract-text-webpack-plugin": "^2.1.2", "file-loader": "^0.11.2", "minimist": "^1.2.0", "postcss-browser-reporter": "^0.5.0", "postcss-cssnext": "^3.0.0", "postcss-import": "^10.0.0", "postcss-loader": "^2.0.6", "postcss-reporter": "^4.0.0", "postcss-url": "^7.0.0", "precss": "^2.0.0", "style-loader": "^0.18.2", "stylelint": "^7.12.0", "stylelint-config-standard": "^16.0.0", "url-loader": "^0.5.9", "webpack": "^3.0.0", "webpack-dev-middleware": "^1.11.0", "webpack-dev-server": "^2.5.0", "webpack-hot-middleware": "^2.18.1", "webpack-notifier": "^1.5.0" }, "dependencies": { "axios": "^0.16.2", "bootstrap": "^3.3.7", "font-awesome": "^4.7.0", "normalize.css": "^7.0.0", "prop-types": "^15.5.10", "react": "^15.6.1", "react-addons-css-transition-group": "^15.6.0", "react-dom": "^15.6.1", "react-hot-loader": "^3.0.0-beta.7", "react-router": "^4.1.1", "react-router-dom": "^4.1.1" }, "-vs-binding": { "ProjectOpened": [ "install" ] } } ```` ``` const webpack = require('webpack'); const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const WebpackNotifierPlugin = require('webpack-notifier'); const dllManifest = require('./wwwroot/vendor-manifest.json'); const bundleOutputDir = './wwwroot'; module.exports = (env) => { const isDevBuild = !(env && env.prod); const NODE_ENV = isDevBuild ? 'development' : 'production'; // eslint-disable-next-line no-console console.log(`Run webpack with NODE_ENV=${NODE_ENV}`); const extractCSS = new ExtractTextPlugin('site.css'); return [{ cache: isDevBuild, resolve: { extensions: ['.js', '.jsx'] }, entry: { main: './app/index' }, output: { path: path.join(__dirname, bundleOutputDir), filename: '[name].js', publicPath: '/' }, module: { rules: [{ enforce: 'pre', test: /\.(js|jsx)?$/, exclude: /node_modules/, loader: 'eslint-loader', options: { failOnError: true } }, { test: /\.(js|jsx)?$/, use: 'babel-loader', exclude: /node_modules/ }, { test: /\.css$/, use: isDevBuild ? ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader'] : ExtractTextPlugin.extract({ fallback: 'style-loader', use: [{ loader: 'css-loader?minimize', options: { importLoaders: 1 } }, 'postcss-loader'] }) }, { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }, { test: /\.html$/, use: 'file-loader?name=[name].[ext]&outputPath=/' }] }, plugins: [ new WebpackNotifierPlugin(), new webpack.DefinePlugin({ 'process.env': { ENV: JSON.stringify(NODE_ENV), NODE_ENV: JSON.stringify(NODE_ENV) } }), new webpack.DllReferencePlugin({ context: __dirname, manifest: dllManifest }) ].concat(isDevBuild ? [ new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), new webpack.SourceMapDevToolPlugin({ filename: '[file].map', moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') }) ] : [ extractCSS, new webpack.optimize.UglifyJsPlugin({ ie8: false, warnings: false, mangle: { screw_ie8: true, keep_fnames: true }, compress: { screw_ie8: true, warnings: false } }) ]) }]; }; ``` Error at chrome sources panel ```jsx ... // import React from 'react'; // import ReactDOM from 'react-dom'; // import { AppContainer } from 'react-hot-loader'; // import { BrowserRouter as Router } from 'react-router-dom'; // import App from './components/App'; // import ScrollToTop from './components/Helpers/ScrollToTop'; // const render = (Component) => { // ReactDOM.render( // <AppContainer> // <Router> // <ScrollToTop> // <Component /> // </ScrollToTop> // </Router> // </AppContainer>, // document.getElementById('root') // ); // }; // render(App); if (true) { module.hot.accept("./app/components/App.js""./app/components/App.js", function () { console.log('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX updated'); }); } ; ... ``` Why it convert to `"./app/components/App.js""./app/components/App.js"`. When I remove `HotModuleReplacement = true` from startup everything works (except hmr).

fergalmoran closed this issue

2025-08-09 17:16:48 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#573