Compatibility with React-Refresh

[hlehmann]

What's wrong?

React-hot-loader is now deprecated and using https://github.com/pmmmwh/react-refresh-webpack-plugin works with the "fullscreen" rendering but not with the main interface.

Steps to reproduce

1 - Clone https://github.com/pmmmwh/react-refresh-webpack-plugin/tree/master/examples/wds-kitchen-sink
2 - install react-cosmos
3 - update webpack.config.js config with const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

[ovidiuch]

@hlehmann Here's what I found before adding React Cosmos into the mix:

• Cloned pmmmwh/react-refresh-webpack-plugin
• cd examples/cra-kitchen-sink
• yarn (install)
• yarn start

React Refresh Plugin: The plugin is unable to detect transformed code from react-refresh. Did you forget to include "react-refresh/babel" in your list of Babel plugins? Note: you can disable this check by setting "disableRefreshCheck: true".

So I tried the other example, the one you mentioned.

• cd examples/wds-kitchen-sink
• yarn (install)
• yarn start

internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'webpack'

Am I doing something wrong? I wanted to test React Refresh before I add React Cosmos, but none of the examples seem to work.

[hlehmann]

to make the wds example work you need to fix webpack.config.js :
change const ReactRefreshPlugin = require('../../src');
with const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

in both case I get the warning message but react refresh works with npm start

[ovidiuch]

Managed to get RC working in the react-refresh repo. Here are the steps I took:

1. What you said about importing React Refresh from @pmmmwh/react-refresh-webpack-plugin.
2. Rename filename: './index.html' to filename: 'index.html' in webpack config line 20. I could make a patch to avoid having to do this in the future.
3. Add mode: 'development' about webpack config because it was bundling for production by default.
4. Added the React Refresh runtime in RC by adding this cosmos.config.json

{
  "globalImports": ["@pmmmwh/react-refresh-webpack-plugin/src/runtime/ReactRefreshEntry"],
  "watchDirs": ["src"]
}

5. Create src/index.fixture.js

import * as React from 'react';
import App from './App';

export default <App />;

And it works

But I still get this warning

React Refresh Plugin: The plugin is unable to detect transformed code from react-refresh. Did you forget to include "react-refresh/babel" in your list of Babel plugins? Note: you can disable this check by setting "disableRefreshCheck: true".

So I don't really get what's going on. What exactly do you mean by React Refresh works anyway? How are you testing the Refresh capabilities?