webpack-contrib/webpack-hot-middleware

Uncaught TypeError: Cannot read property 'EventSource' of undefined

Opened this issue · 9 comments

When updating from 2.0.0 to 2.0.1 I started getting this exception.

Must be related to #12 - can you include a stack trace?

Is there a good way to get a decent stacktrace for this? I'll add what I get in the console below, but I doubt it will be very useful.

Uncaught TypeError: Cannot read property 'EventSource' of undefined(anonymous function) 
@ bundle.js:722(anonymous function) 
@ bundle.js:1323__webpack_require__ 
@ bundle.js:531fn 
@ bundle.js:86evsImportName 
@ bundle.js:698__webpack_require__ 
@ bundle.js:531fn 
@ bundle.js:86(anonymous function)
@ bundle.js:574__webpack_require__ 
@ bundle.js:531fn 
@ bundle.js:86(anonymous function) 
@ bundle.js:561__webpack_require__ 
@ bundle.js:531(anonymous function) 
@ bundle.js:554(anonymous function) 
@ bundle.js:557webpackUniversalModuleDefinition 
@ bundle.js:7(anonymous function) 
@ bundle.js:10

Hmm, looking in to it a bit more the wrapper wrapper for EventSource takes an argument global but at the bottom where the wrapper is invoked undefined is passed. This would obviously cause this error, but I'm not sure why undefined is being explicitly passed. I assume this is supposed to be window.

       * CommonJS module that exports EventSource polyfill version 0.9.6
       * This module is intended for browser side use
       * =====================================================================
       * THIS IS A POLYFILL MODULE, SO IT HAS SIDE EFFECTS
       * IT AUTOMATICALLY CHECKS IF window OBJECT DEFINES EventSource
       * AND ADD THE EXPORTED ONE IN CASE IT IS UNDEFINED
       * =====================================================================
       * Supported by sc AmvTek srl
       * :email: devel@amvtek.com
     */

    "use strict";

    var PolyfillEventSource = __webpack_require__(3).EventSource;
    module.exports = PolyfillEventSource;

    // Add EventSource to window if it is missing...
    if (window && !window.EventSource) {
       window.EventSource = PolyfillEventSource;
       if (console) {
          console.log("polyfill-eventsource added missing EventSource to window");
       }
    }

/***/ },
/* 3 */
/***/ function(module, exports) {

    /*
       * EventSource polyfill version 0.9.6
       * Supported by sc AmvTek srl
       * :email: devel@amvtek.com
     */
    'use strict';

    ;(function (global) { global = undefined
...
...
        global[evsImportName] = EventSource;
    })(undefined);

/***/ },
/* 4 */

There's been a few issues with the eventsource polyfill, I've deprecated v2.0.1 which contained it and released v2.0.2 which removes this functionality dfb7efb.

I'm hoping to release another version later with a working polyfill, so I'd still like to figure out what went wrong here. Can you post your webpack config? I have a theory it's related to the nodejs settings in there.

insin commented

Is this caused by using babel-loader without exclude: /node_modules/? There's no "use strict"; in the source.

base webpack config

var webpack = require('webpack');

var path = require('path');

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlFilePlugin = require('html-webpack-plugin');

module.exports = {

  entry: './client/index.js',

  output: {
    filename: 'bundle.js',
    path: path.resolve('./public'),
    publicPath: '/',
    libraryTarget: 'umd'
  },

  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader'},
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') },
      { test: /\.svg$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }
    ]
  },

  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      output: {
        comments: false
      },
      sourceMap: false
    }),
    new webpack.DefinePlugin({
      'process.env': {NODE_ENV: JSON.stringify('production')}
    }),
    new ExtractTextPlugin('style.css', { allChunks: true }),
    new HtmlFilePlugin({
      inject: true,
      template: 'client/index.html'
    })
  ]

};

modification when running hot

import ExtractTextPlugin from 'extract-text-webpack-plugin';
import HtmlFilePlugin from 'html-webpack-plugin';
import path from 'path';

export default function makeHot(app) {
  const webpack = require('webpack');
  const webpackConfig = require('../webpack.config');

  webpackConfig.plugins = [
    new ExtractTextPlugin('style.css', { allChunks: true }),
    new HtmlFilePlugin({
      inject: true,
      template: 'client/index.html'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ];

  const entry = webpackConfig.entry;
  webpackConfig.entry = [
    'webpack-hot-middleware/client',
    entry
  ];

  const compiler = webpack(webpackConfig);

  const devMiddleware = require("webpack-dev-middleware")(compiler, {
    noInfo: true, publicPath: webpackConfig.output.publicPath
  })

  app.use(devMiddleware);

  app.use(require("webpack-hot-middleware")(compiler));

  app.use(function(req, res, next) {
    const index = devMiddleware.fileSystem.readFileSync(path.join(webpackConfig.output.path, 'index.html'));
    res.end(index);
  }.bind(this));

}

@insin excluding node_modules did the trick thanks for pointing it out

Ok cheers, will include the docs about this in the proper fix for #11