React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work.

[rybon]

What is the actionable thing to do here? I've followed the required steps to set it up, but still see this warning.

[theKashey]

Try update RHL to the latest 4.12.14 version (leased early this week) - it shall address this problem.

[jeanlescure]

Just in case you arrive here while using neutrinojs, here's my webpack.config.js file:

const neutrino = require('neutrino');
const webpack = require('webpack');
const dotenv = require('dotenv');

const env = dotenv.config().parsed;

const envKeys = Object.keys(env).reduce((prev, next) => {
  prev[`process.env.${next}`] = JSON.stringify(env[next]);
  return prev;
}, {});

const config = neutrino().webpack();

const pluginConfig = {
  plugins: [
    ...config.plugins,
    new webpack.DefinePlugin(envKeys)
  ]
};

const aliasConfig = {
  resolve: {
    ...config.resolve,
    alias: {
      ...config.resolve.alias,
      'react-dom': '@hot-loader/react-dom'
    }
  }
};

if (process.env.ENVIRONMENT !== 'production') {
  module.exports = {
    ...config,
    ...pluginConfig,
    ...aliasConfig
  };
} else {
  module.exports = {
    ...config,
    ...pluginConfig
  };
}

Based on all previous discussion it seemed pretty straight forward to just inject the alias into neutrino's config.

Hope someone finds this to be useful :rocket:

[jeremy-ww]

@lili21 I guess it's a feature belongs to webpack, maybe webpack externals have higher priority than an alias. So u can revise your webpack.config.js as below:

webpack.base.js

externals: {
  react: 'React',
  'react-router-dom': 'ReactRouterDOM'
}

webpack.development.js

resolve: {
  alias: { 'react-dom': '@hot-loader/react-dom' }
}

webpack.production.js

externals: {
  'react-dom': 'ReactDOM'
}

[soulcm]

Doesn't work If I'm using webpack externals.

// webpack.config.js
...
externals: {
  'react-dom': 'ReactDOM'
}
...

I have the same problems

[theKashey]

More or less expected. However, why do you need it as external in dev mode?

[merveillevaneck]

Soooo like literally the docs resolved this issue for anyone still running into the console warning:

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

installs the hot-loader patch and links it for use without having to eject anything. so win-win :)

Thanks React Team

[CaptainWild]

I have got the same issue and tried to resolve it according to these guide here, but got same error message. Pls reach me out and help me. Thank you.

[an-ivannikov]

It Worked For Expo Web App. File webpack.config.js

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // Customize the config before returning it.
  config.resolve.alias['react-dom'] = '@hot-loader/react-dom';
  return config;
};