Middleware doesn't show syntax errors in browser

[eyalw]

Middleware doesn't show syntax errors in browser

[glenjamin]

How do you have Babel configured?

I think when using babel-loader you should get errors into the middleware

[eyalw]

Thank you for the quick reply, here is my config:

{
  // devtool:
  // 'eval' - fast build, no source map
  // 'source-map' - slowest build, but includes original code
  // 'cheap-source-map' - faster source map, but not original code, lines only
  // devtool: 'inline-source-map',
  devtool: 'eval',
  entry: [
    'webpack-hot-middleware/client',
    path.resolve(__dirname, 'client/scripts/index.js'),
  ],
  output: {
    path: path.resolve(__dirname, 'public'),
    // publicPath: '/assets/',
    filename: 'bundle.js',
  },
  resolve: {
    alias: {
      /* populated below (*) */
    },
  },

  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loaders: ['babel'],
      },
      {
        test: /\.css$/,
        loader: 'style!css',
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass'],
        // loaders: ['style', 'css?sourceMap', 'sass?sourceMap'],
      },
      // PNG / JPG
      {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=25000',
      },
    ],
    // avoid Webpack going through react dependencies in node_modules,
    noParse: [
      /* populated below (*) */
    ],
  },
  sassLoader: {
    // includePaths: [path.resolve(__dirname, './some-folder')],
  },
  babelLoader: {
    // cacheDirectory - When set, the given directory will be used to cache the results of the loader.
    // blank value defaults to OS temporary file directory.
    cacheDirectory: true,
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
  ],
};

.babelrc

{
  "presets": ["es2015", "react"],
  "sourceMaps": true,
  "env": {
    "development": {
      "plugins": [
        ["react-transform", {
          "transforms": [
            {
              "transform": "react-transform-hmr",
              "imports": ["react"],
              "locals": ["module"]
            }, {
              "transform": "react-transform-catch-errors",
              "imports": ["react", "redbox-react"]
            }
          ]
        }]
      ]
    },
    "production": {

    }
  },
  "plugins": ["transform-runtime"]
}

[glenjamin]

Hrm, nothing there looks obviously out of place.

This example https://github.com/glenjamin/ultimate-hot-reloading-example (which still uses babel 5) does what you describe - so there must be something to do with your config or changes in babel-loader or webpack that have broken this.

[eyalw]

Are you sure it outputs compile erros to browser? and not only runtime errors?
Does it work on your machine?

[glenjamin]

It does, yeah. I messed up the syntax on purpose and got the colourful console error as well as the red box in the browser.

Is it also missing for you if you use the example I posted?

[eyalw]

It does work there, now I'm trying to find the problem. I found that the following option was in the working example, and missing in my config (see screenshot), but when I tried adding it to my webpack.config , babel errored: "Unknown option: base.optional":

[glenjamin]

That particular option is one that existed in Babel 5, but doesn't in Babel 6 - it looks like you have the equivalent in your code

[eyalw]

transform-runtime?
ok, then i'll continue exploring the differences and report back

[eyalw]

It seems that I was missing react-dom, so it silently failed to work.