CODEWITHSUNDEEP
reactjswebpackwebpack-dev-serverhot-module-replacement
jiboulex
jiboulex

Reputation: 3021

Why does Hot Module Replacement stop working on webpack dev server when I setup Babel es2015 preset?

I have a small app running through webpack dev server (on dev environment).

The hot module replacement is running well, I can see my changes on the fly while I edit my js files.

But as soon as I add the es2015 preset in babel loader config, it stops working !

webpack.config.js :

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

process.env.BABEL_ENV = 'development';

module.exports = {
  entry: {
    app: ['react-hot-loader/patch', path.join(__dirname, 'src')]
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].js',
  },
  module: {
   rules: [
     {
       test: /\.js$/,
       include: path.join(__dirname, 'src'),
       use: {
         loader: 'babel-loader',
         options: {
           cacheDirectory: true,
           presets: ['react'],
         },
       },
     }
   ]
  },
  devServer: {
    historyApiFallback: true,
    quiet: true,
    hotOnly: true,
    contentBase: './build',
    host: 'my-host.local',
    port: 8091,
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000,
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new FriendlyErrorsWebpackPlugin(),
    new webpack.WatchIgnorePlugin([
      path.join(__dirname, 'node_modules')
    ]),
  ],
};

src/index.js file :

import React from 'react';
import ReactDOM from 'react-dom';
import Component from './Component';
import { AppContainer } from 'react-hot-loader';

const app = document.createElement('div');
document.body.appendChild(app);

const render = App => {
  ReactDOM.render(
    <AppContainer><App /></AppContainer>,
    app
  );
};

render(Component);

if (module.hot) {
  module.hot.accept('./Component', () => render(Component));
}

Component.js

import React from 'react';

export default class Title extends React.Component {
  render() {
    return (
      <div>Ass</div>
    );
  }
}

.babelrc

{
  "presets": [
    [
      "react",
      "es2015",
      {
        "modules": false
      }
    ]
  ],
  "env": {
    "development": {
      "plugins": [
        "react-hot-loader/babel"
      ]
    }
  }
}

And soon as I replace

presets: ['react'],

by

presets: ['es2015', 'react'],

The Hot Module Replacement feature stops working.. Does anyone has a clue here ?

(also don't hesitate to point at bad practices or avoidable complications in my code)

Upvotes: 2

Views: 195

Answers (1)

Atala
Atala

Reputation: 31

You need the following .babelrc (I don't know why).

.babelrc

{
  "presets": [
    ["es2015", {"modules": false}],
    "stage-2",
    "react"
  ],
}

Where stage-2 is the npm package babel-preset-stage-2.

Upvotes: 1

Related Questions