Aurelia Webpack问题：源映射显示错误但实际无异常

Hey there! Let's break down why you're seeing that false syntax error in Chrome DevTools even though your code runs fine—this is a super common gotcha with Webpack and source maps. Here are the most likely fixes:

This error almost always happens when Webpack's generated source maps don't correctly map your original source files to the bundled code. DevTools ends up pointing a quirk in the bundled runtime code (like Webpack's bootstrapping logic) to the first line of your JS file, even though your actual code is totally valid.

To fix this, tweak your devtool setting in your Webpack config. For development environments, these options work best for accurate source mapping without slowing down builds too much:

// Add this to your webpack.common.js or webpack.dev.js
module.exports = {
  // ... your existing config
  devtool: 'eval-cheap-module-source-map'
};

If you're running in production mode (even accidentally), switch to mode: 'development' temporarily—production source maps are optimized for size, not debug accuracy.

I noticed your provided webpack.common.js snippet cuts off at const { ProvidePl.... While this probably isn't causing the current syntax error false positive, an incomplete plugin import could lead to other issues later. Make sure you finish that line properly:

const { ProvidePlugin } = require('webpack');

Old cached source maps can stick around and cause weird mismatches. Try this:

• Right-click the refresh button in Chrome
• Select Empty Cache and Hard Reload
• Close and re-open DevTools to make sure the cache is fully cleared

If you're using webpack-dev-server, hot reload can sometimes glitch out and mess up source map references. A quick restart of your dev server often fixes this.

内容的提问来源于stack exchange，提问作者Binyata