react-app-rewire-hot-loader

Hi, how to config when I use react-app-rewire-hot-loader? I tried, but didn’t work:

const path = require('path');
const rewireReactHotLoader = require('react-app-rewire-hot-loader');

const fixedHot = value => config => {
  config = rewireReactHotLoader(config, process.env);
  return config;
};

module.exports = {
  webpack: override(
    fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: 'css',
    }),
    addWebpackAlias({
      ['@@']: path.resolve(__dirname, 'src/')
    }),
    fixedHot(),
  ),
  devServer: function(configFunction) {
    return function(proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      config.hot = true;
      return config;
    }
  }
};

[MeetzhDing]

@GloriaCHL @alexkreidler

I get this solution, and it’s work for me !

const { override, fixBabelImports } = require('customize-cra');
const rewireReactHotLoader = require('react-app-rewire-hot-loader');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  (config, env) => {
    config = rewireReactHotLoader(config, env);
    return config;
  }
)

Other steps: http://npm.taobao.org/package/react-app-rewire-hot-loader

[quannh25595]

I don’t know why but the env in @MeetzhDing seems to be undefined. And I found mode inside config. This code works for me:

const { override, fixBabelImports } = require('customize-cra');
const rewireReactHotLoader = require('react-app-rewire-hot-loader');

/* config-overrides.js */
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  config => {
    if (config.mode === 'development') {
      config.resolve.alias['react-dom'] = '@hot-loader/react-dom';
    }
    config = rewireReactHotLoader(config, config.mode);
    return config;
  },
);