Hi, how to config when I use <a href="https://github.com/cdharris/react-app-rewire-hot

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

I don't know why but the env in <a class="user-menti

You may try to use the <a href="https://github.com/arackaf/customize-cra#addbabelplugi

I got it working just by putting the function in directly: <div class="snippet-cli

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

react-app-rewire-hot-loader about customize-cra HOT 9 CLOSED

arackaf commented on July 28, 2024

react-app-rewire-hot-loader

from customize-cra.

Comments (9)

MeetzhDing commented on July 28, 2024 11

@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

from customize-cra.

quannh25595 commented on July 28, 2024 5

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;
  },
);

from customize-cra.

FezVrasta commented on July 28, 2024 1

You may try to use the addBabelPlugin utility to add react-hot-loader/babel and see if it works.

from customize-cra.

SteffeyDev commented on July 28, 2024 1

I got it working just by putting the function in directly:

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

module.exports = override(
  rewireReactHotLoader,
  ...otherOptions
}

Conceptually, this is equivalent to @MeetzhDing's solution, just simplified to it's fullest extent.

from customize-cra.

FezVrasta commented on July 28, 2024

Alternatively, if you use Yarn, you may use react-🔥-dom without having to override any CRA config.

yarn add react-dom@npm:@hot-loader/react-dom

from customize-cra.

FezVrasta commented on July 28, 2024

@GloriaCHL have you sorted out your problem? Can we close this issue?

from customize-cra.

alexkreidler commented on July 28, 2024

any updates?

from customize-cra.

SylvanasGone commented on July 28, 2024

I implemented a plugin which will let you use hot-loader directly without extra code

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

module.exports = override(
  // ...other rewires
  rewireReactHotLoader()
)