File change detected, webpack builds initial version

I’m having a problem, and I kinda figure it’s not a bug but some fairly obvious configuration problem but I can’t find anything on it, so here’s to hoping.

Here’s how it works: I have Webpack set up to load Typescript files with ts-loader. I require all the test files dynamically in spec.bundle.js. I have Webpack set to watch: true, and singleRun as well as autoWatch set to false. I’m testing on Chrome and running karma from gulp. What happens is that Webpack, or maybe the Typescript loader, is compiling the files each time I change a tested file, but it’s not compiling the changes I’ve made, instead emitting the error that I just fixed over and over again.

I’ve tested this by making a very obvious typing error and undoing it while having my gulp tdd task running. If I start the task while the error is present, every change to the code (including removing the error) will emit a Typescript error message. If I start the task while the error isn’t present, the reverse will happen: every file change triggers a compile that runs successfully.

Does this issue seem familiar to anyone? I can’t find anything about it on the web, which suggests that it’s probably some stupid mistake I’ve made. Hopefully someone can offer some help 😃

• gulp task:

  gulp.task('tdd', (done) => {
  new karma.Server({
      configFile: __dirname + '/karma.conf.js'
  }, done).start();
  });
  

• spec.bundle.js:

  Error.stackTraceLimit = Infinity;
  require('reflect-metadata');
  require('angular2/test');
  require('angular2/src/mock/location_mock');
  
  var appContext = require.context('./src', true, /\.spec\.ts/);
  appContext.keys().forEach(appContext);
  
  var domAdapter = require('angular2/src/platform/browser/browser_adapter').BrowserDomAdapter;
  domAdapter.makeCurrent();
  

• karma.conf.js:

  module.exports = function(config) {
  config.set({
      basePath: '',
      files: [
          { pattern: 'node_modules/es6-shim/es6-shim.js', watched: false },
          { pattern: 'spec.bundle.js', watched: false },
      ],
      preprocessors: {
          'spec.bundle.js': ['webpack', 'sourcemap']
      },
  
      port: 9876,
      reporters: ['dots'],
      frameworks: ['jasmine'],
      browsers: ['Chrome'],
  
      colors: true,
      logLevel: config.LOG_INFO,
      singleRun: false,
      autoWatch: false,
      concurrency: Infinity
  
      webpack: {
          resolve: {
              cache: false,
              root: __dirname,
              extensions: ['','.ts','.js','.json'],
              alias: {
                  'app': 'src/app',
              }
          },
  
          devtool: 'inline-source-map',
          module: {
              loaders: [
                  { test: /\.html$/, loader: 'raw' },
                  { test: /\.ts$/,   loader: 'ts-loader', exclude: [/node_modules/] },
              ]
          },
  
          stats: { colors: true, reasons: true },
          watch: true,
  
          node: {
              fs: 'empty',
              json: 'empty',
              tap: 'empty'
          }
      },
      webpackServer: {
          stats: {
              chunks: false
          }
      }
  });
  }
  

[matthieu-foucault]

Aha! We have a winner! Not a karma-webpack issue then. I did the same as you, upgrading karma from 3.1.1 to 3.1.3 in a repo, and only started having the issue then. Thanks @colincasey !

[matthieu-foucault]

Thanks for the easy reproduction steps @happycollision