why the use of window in webpack entry file will affact the React hot reload?

Question

Env: React@16.2.0 + React-Router@3.2.1 + Redux@5.0.7 + webpack@3.5.6

Entry File: index.js

const MOUNT_NODE = document.getElementById('root');

// Line A
const __DEV__ = window.__DEV__;


let render = () => {
  const App = require('./components/App').default;
  const routes = require('./pages/router').default(store);

  ReactDOM.render(
    <App store={store} routes={routes} />,
    MOUNT_NODE
  );
};

// Development Tools
// ------------------------------------
if (__DEV__) {
  if (module.hot) {
    const renderApp = render;
    const renderError = (error) => {
      const RedBox = require('redbox-react').default;

      ReactDOM.render(<RedBox error={error} />, MOUNT_NODE);
    };

    render = () => {
      try {
        renderApp();
      } catch (e) {
        renderError(e);
      }
    };

    // Setup hot module replacement
    module.hot.accept([
      './components/App',
      './pages/router',
    ], () =>
      setImmediate(() => {
        ReactDOM.unmountComponentAtNode(MOUNT_NODE);
        render();
      })
    );
    module.hot.accept();
  }
}

the __DEV__ is defined in webpack config file:

new webpack.DefinePlugin(Object.assign({
  __DEV__: project.env === 'development',
}, project.globals))

and then i start the local dev server.

but when i change the jsx, the hot reload don't work, and the warning tips:

process-update.js?e13e:95 [HMR] The following modules couldn't be hot updated: (Full reload needed) This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details.

but when i delete the line A, the hot reload work fine, the warning tips also disappear。

this is why？ thanks.

Answer 1

It should be string. You need to use JSON.stringify to convert Boolean to String. It should be

new webpack.DefinePlugin(Object.assign({
  __DEV__: JSON.stringify(project.env === 'development'),
}, project.globals))

Please check DefinePlugin