Fix CRA error overlay clashing with fast-refresh overlay

README.md

@@ -102,6 +102,22 @@ module.exports = api => {
 };
 ```
 
+**Create React App**
+
+See [the CRA example](./examples/cra-kitchen-sink).
+
+Setting this up mostly relies on
+
+- [Setting up `react-app-rewired` and `customize-cra`](https://github.com/arackaf/customize-cra).
+- [Applying the modifications in `config-overrides.js`](./examples/cra-kitchen-sink/config-overrides.js).
+
+Alternatively if you are ejected from CRA, add the webpack and babel-plugins to you `webpack.config.js`.
+
+- The `{ disableRefreshCheck: true }` option may be required when instantiating `ReactRefreshPlugin`.
+- You will need to change the `react-dev-utils/webpackHotDevClient` entry for the customized one from this repo.
+
+  [`require.resolve('@pmmmwh/react-refresh-webpack-plugin')`](./src/webpackHotDevClient.js)
+
 ## Options
 
 This plugin accepts a few options that are specifically targeted for advanced users.

examples/cra-kitchen-sink/.env

@@ -0,0 +1,3 @@
+# Needed only because this is in a repo with a different webpack resolution range.
+# You probably don't need this in your own project.
+SKIP_PREFLIGHT_CHECK=true

examples/cra-kitchen-sink/config-overrides.js

@@ -1,7 +1,23 @@
-const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const { addBabelPlugin, addWebpackPlugin, override } = require('customize-cra');
 
+// When using from NPM you should import this as follows:
+const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
+const replaceCRADevServer = () => config => {
+  config.entry = config.entry.map(entry => {
+    if (entry.match(/react-dev-utils/)) {
+
+      // When using from NPM you should resolve this as follows:
+      // return require.resolve("@pmmmwh/react-refresh-webpack-plugin/src/webpackHotDevClient");
+      return require.resolve("../../src/webpackHotDevClient");
+    }
+    return entry;
+  })
+  return config;
+}
+
 module.exports = override(
   addBabelPlugin(require.resolve('react-refresh/babel')),
-  addWebpackPlugin(new ReactRefreshPlugin())
+  addWebpackPlugin(new ReactRefreshPlugin({ disableRefreshCheck: true })),
+  replaceCRADevServer(),
 );

examples/cra-kitchen-sink/package.json

@@ -7,15 +7,15 @@
     "react-dom": "^16.12.0"
   },
   "devDependencies": {
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.1.0",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.1.3",
+    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/react": "^9.4.1",
+    "@testing-library/user-event": "^10.0.0",
     "babel-loader": "^8.0.6",
     "customize-cra": "^0.9.1",
     "react-app-rewired": "^2.1.5",
-    "react-refresh": "^0.7.0",
-    "react-scripts": "3.3.0"
+    "react-refresh": "^0.8.0",
+    "react-scripts": "3.4.0"
   },
   "scripts": {
     "start": "react-app-rewired start",