Error when adding new file with watcher

[ColCh]

I have karma running with watcher enabled.

It throws an error when I create new file (Product-view.jsx is new file itself)

webpack: bundle is now INVALID.
ERROR [karma]: [Error: Path doesn't exist '/_karma_webpack_/specs/components/Product-view.jsx']
Error: Path doesn't exist '/_karma_webpack_/specs/components/Product-view.jsx'
    at MemoryFileSystem.readFileSync (/srv/node_modules/karma-webpack/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:82:10)
    at MemoryFileSystem.readFile (/srv/node_modules/karma-webpack/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:201:21)
    at doRead (/srv/node_modules/karma-webpack/index.js:157:26)
    at Plugin.readFile (/srv/node_modules/karma-webpack/index.js:161:3)
    at /srv/node_modules/karma-webpack/index.js:177:17
    at nextPreprocessor (/srv/node_modules/karma/lib/preprocessor.js:59:28)
    at /srv/node_modules/karma/lib/preprocessor.js:97:7
    at fs.js:336:14
    at /srv/node_modules/webpack/node_modules/watchpack/node_modules/chokidar/node_modules/readdirp/node_modules/graceful-fs/graceful-fs.js:104:5
    at /srv/node_modules/karma/node_modules/graceful-fs/graceful-fs.js:104:5

Attaching my karma.conf.js also:

'use strict';

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = function (config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha', 'sinon-chai'],

    // list of files / patterns to load in the browser
    files: [
      'specs/**/*.jsx'
    ],

    // list of files to exclude
    exclude: [
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'specs/**/*.jsx': ["webpack"]
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    reporters: ['progress', 'coverage'],

    coverageReporter: {
        type : 'html',
        dir : 'coverage/'
    },

    // web server port
    port: 9876,

    // Timeout for capturing a browser (in ms).
    captureTimeout: 60 * 1e3,

    // to avoid DISCONNECTED messages
    browserDisconnectTimeout : 10000, // default 2000
    browserDisconnectTolerance : 1, // default 0
    browserNoActivityTimeout : 60 * 1e3, //default 10000

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_ERROR,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Include timeout because of rsync
    autoWatchBatchDelay: 2 * 1e3,

    // webpack options
    webpack: {
      cache: true,
      devtool: 'inline-source-map',
      watchDelay: 3 * 1e3,
      resolve: {
        extensions: ['', ".webpack.js", '.js', '.jsx'],
        modulesDirectories: ["node_modules", "bower_components"],
        alias: {
          'flux': path.join(__dirname, 'src/scripts/flux'),
          'src': path.join(__dirname, 'src/'),
          'routes': path.join(__dirname, 'src/scripts/routes'),
          'components': path.join(__dirname, 'src/scripts/components'),
          'scripts': path.join(__dirname, 'src/scripts'),
          'styles': path.join(__dirname, 'src/styles'),
          "kendo": "kendo-ui-webpack"
        }
      },
      module: {
        preLoaders: [
            {test: /(\.jsx)|(\.js)$/, exclude: /(node_modules|bower_components|specs)/, loader: 'isparta-instrumenter'},
        ],
        loaders: [
          {test: /(react)|(react\/addons)$/, loader: 'expose?React!imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham'},
          {test: /\/jquery.js$/, loader: 'expose?jQuery'},
          {test: /react-tabs.*\.js$/, loader: '6to5-loader?experimental&runtime'},
          {test: /(\.jsx)|(\.js)$/, exclude: /node_modules/, loader: '6to5-loader?experimental&runtime'},
          {test: /\.css$/, loader:  'null'},
          {test: /\.(png|jpg|gif)$/, loader: 'null'},
          {test: /icon-.+\.(svg)$/, loader: 'null'},
          {test: /\.styl$/, loader: 'null'},
          {test: /\.woff.?$/, loader: "null" },
          {test: /fonts\/.*\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "null"},
          {test: /\.json$/, loader: "json-loader"},
          {test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery'},
          {test: /kendo\-ui\-core[\///].*\.js$/, loader: "imports?jQuery=jquery"},
        ]
      },
      plugins: [
        new webpack.PrefetchPlugin('react'),
        new webpack.PrefetchPlugin('jquery'),
        new webpack.PrefetchPlugin('lodash'),
        new webpack.PrefetchPlugin('fluxxor'),
        new webpack.PrefetchPlugin('react-router'),
        new webpack.ProvidePlugin({
          to5Runtime: "imports?global=>{}!exports?global.to5Runtime!6to5/runtime",
          React: 'react/addons',
          _: 'lodash',
          Router: 'react-router',
          Fluxxor: 'Fluxxor',
        }),
        new webpack.DefinePlugin({'global.BACKEND_HOST': '"http://localhost:8080/"'}),
        new webpack.DefinePlugin({'global.RESOURCE_PATH_PREFIX': '"http//localhost:8000"'}),
        new webpack.DefinePlugin({'process.env.NODE_ENV': '"development"', 'global.SIDE': '"frontend"'}),
        new webpack.ResolverPlugin(
          new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        )
      ]
    },

    webpackMiddleware: {
      stats: {
        // With console colors
        colors: true,
        // add the hash of the compilation
        hash: false,
        // add webpack version information
        version: false,
        // add timing information
        timings: true,
        // add assets information
        assets: false,
        // add chunk information
        chunks: false,
        // add built modules information to chunk information
        chunkModules: false,
        // add built modules information
        modules: false,
        // add also information about cached (not built) modules
        cached: false,
        // add information about the reasons why modules are included
        reasons: false,
        // add the source code of modules
        source: true,
        // add details to errors (like resolving log)
        errorDetails: true,
        // add the origins of chunks and chunk merging info
        chunkOrigins: true,
        // Add messages from child loaders
        children: false
      }
    },

  });
};

[snario]

+1

[balanceiskey]

I'm starting to experience this after upgrading to babel-loader from an older 6to5-loader.

[balanceiskey]

Aaaaand I figured it out. If you have webpackServer.quiet flag switched to false be sure to flip it on so that any build errors get output. In my case, I had a JSX pragma sitting around which Babel wasn't happy with and was spitting out an error that I wasn't seeing.

[mz026]

+1

[barsukov]

+1

[Coobaha]

+1

[barsukov]

I think the reason why sometimes this error is happened when you have a problem with webpack compilation every time u see it in log. Solution to catch this error and show people something like this "Hey man you have a problem with webpack comipilation fix it otherwise bla bla , run webpack compile without karma" because this error message not informative IMHO.

[ColCh]

You mean pull request?

30 апр. 2015 г. 3:34 PM пользователь "Vladimir Barsukov" <
[email protected]> написал:

I think the reason why sometimes this error is happened when you have a
problem with webpack compilation every time u see it in log. Solution to
catch this error and show people something like this "Hey man you have a
problem with webpack comipilation fix it otherwise bla bla , run webpack
compile without karma" because this error message not informative IMHO.

—
Reply to this email directly or view it on GitHub
#40 (comment)
.

[geminiyellow]

+1

[Celestz]

+1

[keriwarr]

+1

[sethlivingston]

I ran into this, but I wasn't getting any webpack/compile errors. I fixed it by changing the webpack config in my karma.config to:

preprocessors:
  '../src/*.coffee': ['webpack']
  '../src/tests/*.coffee' : ['webpack']

instead of

preprocessors:
  'src/*.coffee': ['webpack']
  'src/tests/*.coffee' : ['webpack']

I'm getting other errors now, but that seems to have fixed this problem by getting out of the karma_webpack directory.

[gonzofish]

@sethlivingston I don't think doing that is going to run webpack on your files...

[mewdriller]

+1

[mewdriller]

@sokra: I took a look under the hood and it seems like it's a pretty straightforward issue. Let me know if you'd like any alterations to the PR.

[bzalasky]

For me at least, this issue was caused by flycheck (in Emacs) creating temporary files. Excluding these in my karma.conf.js with '**/*/flycheck*.js' resolved the issue.

[thomasklein]

+1

[okmttdhr]

+1

[s0ber]

@sokra This is still actual. Fix, suggested by the guys above, is helping.
upd: Actually, don't mind. I've fixed it by using contexts. I think it is better to rely on a single resolving and watching mechanism, and webpack works just awesome with that.

[sandlunds]

I don't understand what the fix is. I'm running webpack with ts-loader and the issue is easily reproducible if I simply copy an existing file into a new file that picked up by my file pattern. E.g. copying app.spec.ts to app.copy.spec.ts gives me:

{ [Error: no such file or directory]
 code: 'ENOENT',
 errno: 34,
 message: 'no such file or directory',
 path: '/_karma_webpack_/app/app.copy.spec.ts' }

Error: no such file or directory
at MemoryFileSystem.readFileSync (C:\kod\vn\n2k-client\node_modules\karma-webpack\node_modules\webpack-dev-middleware\node_modules\memory-fs\lib\MemoryFileSystem.js:114:10)
....

@s0ber what does contexts mean in this case?

[s0ber]

@beakdoctor Instead of specifying file patterns inside karma configuration, you can specify just one file (a single entry point). And inside this file you can specify a webpack context, which will match files that you want. You can take a look at example here:
https://github.com/webpack/karma-webpack#alternative-usage

[sandlunds]

Thank you. That works for me.

[Silviu-Marian]

Hi guys :)
The problem is still here, this should've probably got merged in

Until then,
package.json:

{
  "scripts": {
    "test": "nodemon --exitcrash -w karma.conf.js karma.js",
    "posttest": "npm run test"
  }
}

karma.js:

const path = require('path')
const KarmaServer = require('karma').Server
const karmaServer = new KarmaServer({ configFile: path.join(__dirname, 'karma.conf.js') }, process.exit)
karmaServer.start()

npm will restart nodemon automatically when it crashes due to a new file added, and nodemon will restart karma automatically when its configuration changes