feat: better refresh plugin integration #9375

pmmmwh · 2020-07-28T09:49:31Z

I've just released 0.4.x stable for the fast refresh plugin, and didn't want CRA to release 4.0 depending on a beta version, so I decided to PR the related changes 😺

Changes

Bumped @pmmmwh/react-refresh-webpack-plugin from 0.4.0-beta.8 to 0.4.1 (latest stable)
Added interop to enable the plugin to use react-error-overlay instead of the bundled overlay, unifying the error experience for CRA users
- This is needed because only the plugin will be able to catch module initialization errors (during HMR);
- I think keeping a cohesive experience throughout the usage of CRA is a good thing;
- This would save a few kilobytes since the plugin will not inject the bundled stuff (overlay files and socket files).
Fixed a longstanding flow issue in the overlay

Verification/Testing

Create a new CRA project with both the current and this patched version
Start the app, make sure it is fully loaded
Throw an error during module initialisation in App.js (i.e. outside of the App function component)

Before

After

Questions

One thing I'm not sure is where to put the overlay interop - I assumed it is OK to put in react-dev-utils (since I also see immer there), but I'm open to moving it anywhere.

Excited for CRA v4 to ship with fast refresh enabled by default 🥰 !

mrmckeb

Thanks @pmmmwh, we're also super excited to ship this!

iansu · 2020-07-28T19:38:17Z

Thanks!

* Update packages (facebook#9081) * Fix dotenv file loading order (facebook#9037) * Fix dotenv file loading order * tests: fix failing env tests * tests: fix more failing tests Co-authored-by: Brody McKee <[email protected]> * feat: remove typescript flag and NODE_PATH support (facebook#8934) * Update question issue template * Update getting-started.md to match templates (facebook#9089) * Upgrade to Jest 26 (facebook#8955) * Update Jest to 26 * Upgrade to Jest 26.0.1 * Use jest-circus test runner by default * Try resolving test runner to fix behavior tests * Run TypeScript verification in new context * Delete globalThis if polyfilled * feat(react-scripts): allow testMatch for jest config (facebook#9114) resolves facebook#8637 * Add support for absolute paths when using url() in CSS (facebook#7937) * Support scss absolute path resolution for url() Adding resolve-url-loader broke all apps using scss with centralized assets folder and all url(./assets/*.png) broke (facebook#7023). This change allows apps to use url(/assets/*.png) and it would map to src/assets/*.png * test: Add global scss assets test * Upgrade dependencies (facebook#9132) * Fix typo in docs (facebook#9135) * Add performance relayer + documentation (web-vitals) (facebook#9116) Co-authored-by: Brody McKee <[email protected]> Co-authored-by: Ian Schmitz <[email protected]> * Update deployment docs for Azure Static Web Apps (facebook#9042) Co-authored-by: Minh Nguyen <[email protected]> * Replace Spectrum links with GitHub Discussions (facebook#9102) * Use process.execPath to spawn node subprocess (facebook#8694) * Upgrade dependencies (facebook#9196) * Bump version of Verdaccio (facebook#7787) * Support ESLint 7.x (facebook#8978) * Fix chai URL (facebook#8895) The root domain, chaijs.com, does not serve a valid certificate and gives a browser warning. * Explain how to uninstall create-react-app globally (facebook#9244) * Explain how to uninstall create-react-app globally * Add uninstallation intructions for yarn * Upgrade dependencies (facebook#9317) * Switch to the Workbox InjectManifest plugin (facebook#9205) Co-authored-by: Ian Schmitz <[email protected]> * Upgrade refresh plugin (facebook#9348) * feat: Update ESLint dependencies (facebook#9251) Co-authored-by: Ian Schmitz <[email protected]> * Remove server worker registration from default templates (facebook#9349) * Clarify wording in adding TypeScript to existing project (facebook#9231) * feat: better refresh plugin integration (facebook#9375) * feat: exit on outdated create-react-app version (facebook#9359) * Prepare 4.0.0 alpha release * Updated README.md Templates to Follow ESLint Markdown Rules (facebook#9241) * [Doc] fix React Testing Library example (facebook#9245) * Update running-tests.md (facebook#9380) * Add Fast Refresh warning when using React < 16.10 (facebook#9350) * Publish refreshOverlayInterop with react-dev-utils (facebook#9390) * fix: remove deprecated rule (facebook#9401) * clean formatMessage usage (facebook#9059) * feat: Update testing-library dependencies to latest (facebook#9252) * fix: use default modules option from `preset-env` (facebook#9374) * Bump immer version (facebook#8933) Co-authored-by: Ian Schmitz <[email protected]> Co-authored-by: Ian Sutherland <[email protected]> * Upgrade whatwg-fetch (facebook#9392) Co-authored-by: Ian Schmitz <[email protected]> * Fix template name handling (facebook#9412) * Prepare 4.0.0 alpha release * chore: update to [email protected] (facebook#9461) * Create SECURITY.md * Add 3.4.2 to changelog * Add 3.4.3 to the changelog * Fixes in the /packages/react-devs-utils/README.md file (facebook#9471) * Added CRA logo in README.md (facebook#9363) * Added React logo in README.md * Added React logo in README file that makes looks nicer now. * Added CRA Logo in README.md that looks nicer * Replacing React Logo with CRA Logo instead Co-authored-by: Eddie Monge Jr <[email protected]> * Update README.md Co-authored-by: Eddie Monge Jr <[email protected]> Co-authored-by: Dan Abramov <[email protected]> * Update Vercel deployment documentation (facebook#9560) * Fix insensitive language in Docusaurus docs (facebook#9618) * Remove ESLint extends and add Jest rules (facebook#9587) * fix: Fix azure-pipelines' endOfLine (facebook#9258) * Update template dependencies to latest version (facebook#9526) Co-authored-by: Ian Schmitz <[email protected]> * Update running-tests.md (facebook#9073) * feat: Update ESLint dependencies (facebook#9434) * Emphasise that Next.js is capable of SSG (facebook#9630) * docs: add alt tag to homepage logo (facebook#9499) * fix: resolve CI build failure (facebook#9640) * Use new JSX transform with React 17 (facebook#9645) * Upgrade dependencies (facebook#9639) * Prepare 4.0.0 alpha release * Update postcss-safe-parser * Prepare 4.0.0 alpha release * Update CODEOWNERS * fix: resolve ESLint config from appPath (facebook#9683) * Add AVIF image support (facebook#9611) Co-authored-by: Ian Schmitz <[email protected]> * fix: resolve new JSX runtime issues (facebook#9788) * Upgrade Docusaurus to latest version (facebook#9728) Co-authored-by: Ian Schmitz <[email protected]> Co-authored-by: Joe Haddad <[email protected]> Co-authored-by: Brody McKee <[email protected]> Co-authored-by: Brody McKee <[email protected]> Co-authored-by: Ian Sutherland <[email protected]> Co-authored-by: Josemaria Nriagu <[email protected]> Co-authored-by: Jeroen Claassens <[email protected]> Co-authored-by: atlanteh <[email protected]> Co-authored-by: Jakob Krigovsky <[email protected]> Co-authored-by: Houssein Djirdeh <[email protected]> Co-authored-by: Burke Holland <[email protected]> Co-authored-by: Minh Nguyen <[email protected]> Co-authored-by: Anuraag Agrawal <[email protected]> Co-authored-by: Michaël De Boey <[email protected]> Co-authored-by: Brian Morearty <[email protected]> Co-authored-by: Nick McCurdy <[email protected]> Co-authored-by: Jeffrey Posnick <[email protected]> Co-authored-by: Dylan Brookes <[email protected]> Co-authored-by: Michael Mok <[email protected]> Co-authored-by: Rafael Quijada <[email protected]> Co-authored-by: Sakito Mukai <[email protected]> Co-authored-by: Andy C <[email protected]> Co-authored-by: Kline Moralee <[email protected]> Co-authored-by: Gerrit Alex <[email protected]> Co-authored-by: Sam Chen <[email protected]> Co-authored-by: Huáng Jùnliàng <[email protected]> Co-authored-by: Stafford Williams <[email protected]> Co-authored-by: Lenard Pratt <[email protected]> Co-authored-by: Simen Bekkhus <[email protected]> Co-authored-by: Dan Abramov <[email protected]> Co-authored-by: Webdot_30 <[email protected]> Co-authored-by: Raihan Nismara <[email protected]> Co-authored-by: Eddie Monge Jr <[email protected]> Co-authored-by: Timothy <[email protected]> Co-authored-by: Liam Duffy <[email protected]> Co-authored-by: Tobias Büschel <[email protected]> Co-authored-by: Hongbo Miao <[email protected]> Co-authored-by: Alexey Pyltsyn <[email protected]>

* Update template tests (facebook#8705) * Bump TypeScript template to 3.8 (facebook#8713) * Add .cjs and .mjs files support to test runner (facebook#8768) * Use simplified import of @testing-library/jest-dom (facebook#8763) * Include absoluteRuntime in babel preset docs (facebook#5847) * Specify what files are served form a bare local copy (facebook#8749) * fix: handle templates without main package field (facebook#8734) * Add experimental react-refresh support (facebook#8582) Co-authored-by: Ian Schmitz <[email protected]> * Add setupTests.js to the list of generated files (facebook#8791) * Simplify wording in setting-up-your-editor.md (facebook#8684) * Update url to see prettier in action (facebook#8610) * Bump acorn from 6.4.0 to 6.4.1 in /docusaurus/website (facebook#8656) Bumps [acorn](https://github.com/acornjs/acorn) from 6.4.0 to 6.4.1. - [Release notes](https://github.com/acornjs/acorn/releases) - [Commits](acornjs/acorn@6.4.0...6.4.1) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Don't use webpack multi entry unnecessarily (facebook#8834) Passing an array with a single entry is not equivalent. This causes Webpack to generate another wrapper module around the entry. This is just unnecessary overhead and bytes. * Widen eslint-config-react-app peer dependency versions (facebook#8892) See facebook#7790 for a previous similar PR. * Revert "Replace favicon in templates (facebook#8194)" (facebook#8925) This reverts commit c03bb36. * Minor/patch dependency upgrades (facebook#8947) * Upgrade to Jest 25 (facebook#8362) Co-authored-by: Ian Schmitz <[email protected]> * Drop Node 8 support (facebook#8948) * Bump React Hooks ESLint plugin to 4.0.0 (facebook#8939) * Update build script deployment URL (facebook#8651) * Do not check for interactive session to shut down dev server (facebook#8845) * Support source maps for scss in dev environments (facebook#8638) * Skip stdin resuming to support lerna parallel (facebook#8700) * Set resetMocks to true by default in jest config (facebook#7899) * Add import/no-anonymous-default-export lint rule (facebook#8926) * Upgrade testing-library packages (facebook#8406) Co-authored-by: Ian Schmitz <[email protected]> * Bump style-loader to 1.2.1 (facebook#8891) * Support devDependencies in templates (facebook#8838) * fix react-refresh babel plugin not applied (facebook#8952) * Add a VSCode tip in the CSS reset section (facebook#8246) * Add back in --stats output from webpack. (facebook#8790) * Fix --use-pnp for Yarn 2 (facebook#8460) * Replace period in CSS Module classnames (facebook#8492) * Move shortlinks to cra.link (facebook#8957) * Remove outdated comment (facebook#8858) * bump webpack-dev-server to 3.11.0 (facebook#8975) Co-authored-by: Marc Hassan <[email protected]> * Dependency major version upgrades (facebook#8950) * Update packages (facebook#9081) * Fix dotenv file loading order (facebook#9037) * Fix dotenv file loading order * tests: fix failing env tests * tests: fix more failing tests Co-authored-by: Brody McKee <[email protected]> * feat: remove typescript flag and NODE_PATH support (facebook#8934) * Update question issue template * Update getting-started.md to match templates (facebook#9089) * Upgrade to Jest 26 (facebook#8955) * Update Jest to 26 * Upgrade to Jest 26.0.1 * Use jest-circus test runner by default * Try resolving test runner to fix behavior tests * Run TypeScript verification in new context * Delete globalThis if polyfilled * feat(react-scripts): allow testMatch for jest config (facebook#9114) resolves facebook#8637 * Add support for absolute paths when using url() in CSS (facebook#7937) * Support scss absolute path resolution for url() Adding resolve-url-loader broke all apps using scss with centralized assets folder and all url(./assets/*.png) broke (facebook#7023). This change allows apps to use url(/assets/*.png) and it would map to src/assets/*.png * test: Add global scss assets test * Upgrade dependencies (facebook#9132) * Fix typo in docs (facebook#9135) * Add performance relayer + documentation (web-vitals) (facebook#9116) Co-authored-by: Brody McKee <[email protected]> Co-authored-by: Ian Schmitz <[email protected]> * Update deployment docs for Azure Static Web Apps (facebook#9042) Co-authored-by: Minh Nguyen <[email protected]> * Replace Spectrum links with GitHub Discussions (facebook#9102) * Use process.execPath to spawn node subprocess (facebook#8694) * Upgrade dependencies (facebook#9196) * Bump version of Verdaccio (facebook#7787) * Support ESLint 7.x (facebook#8978) * Fix chai URL (facebook#8895) The root domain, chaijs.com, does not serve a valid certificate and gives a browser warning. * Explain how to uninstall create-react-app globally (facebook#9244) * Explain how to uninstall create-react-app globally * Add uninstallation intructions for yarn * Upgrade dependencies (facebook#9317) * Switch to the Workbox InjectManifest plugin (facebook#9205) Co-authored-by: Ian Schmitz <[email protected]> * Upgrade refresh plugin (facebook#9348) * feat: Update ESLint dependencies (facebook#9251) Co-authored-by: Ian Schmitz <[email protected]> * Remove server worker registration from default templates (facebook#9349) * Clarify wording in adding TypeScript to existing project (facebook#9231) * feat: better refresh plugin integration (facebook#9375) * feat: exit on outdated create-react-app version (facebook#9359) * Prepare 4.0.0 alpha release * Updated README.md Templates to Follow ESLint Markdown Rules (facebook#9241) * [Doc] fix React Testing Library example (facebook#9245) * Update running-tests.md (facebook#9380) * Add Fast Refresh warning when using React < 16.10 (facebook#9350) * Publish refreshOverlayInterop with react-dev-utils (facebook#9390) * fix: remove deprecated rule (facebook#9401) * clean formatMessage usage (facebook#9059) * feat: Update testing-library dependencies to latest (facebook#9252) * fix: use default modules option from `preset-env` (facebook#9374) * Bump immer version (facebook#8933) Co-authored-by: Ian Schmitz <[email protected]> Co-authored-by: Ian Sutherland <[email protected]> * Upgrade whatwg-fetch (facebook#9392) Co-authored-by: Ian Schmitz <[email protected]> * Fix template name handling (facebook#9412) * Prepare 4.0.0 alpha release * chore: update to [email protected] (facebook#9461) * Create SECURITY.md * Add 3.4.2 to changelog * Add 3.4.3 to the changelog * Fixes in the /packages/react-devs-utils/README.md file (facebook#9471) * Added CRA logo in README.md (facebook#9363) * Added React logo in README.md * Added React logo in README file that makes looks nicer now. * Added CRA Logo in README.md that looks nicer * Replacing React Logo with CRA Logo instead Co-authored-by: Eddie Monge Jr <[email protected]> * Update README.md Co-authored-by: Eddie Monge Jr <[email protected]> Co-authored-by: Dan Abramov <[email protected]> * Update Vercel deployment documentation (facebook#9560) * Fix insensitive language in Docusaurus docs (facebook#9618) * Remove ESLint extends and add Jest rules (facebook#9587) * fix: Fix azure-pipelines' endOfLine (facebook#9258) * Update template dependencies to latest version (facebook#9526) Co-authored-by: Ian Schmitz <[email protected]> * Update running-tests.md (facebook#9073) * feat: Update ESLint dependencies (facebook#9434) * Emphasise that Next.js is capable of SSG (facebook#9630) * docs: add alt tag to homepage logo (facebook#9499) * fix: resolve CI build failure (facebook#9640) * Use new JSX transform with React 17 (facebook#9645) * Upgrade dependencies (facebook#9639) * Prepare 4.0.0 alpha release * Update postcss-safe-parser * Prepare 4.0.0 alpha release * Update CODEOWNERS * fix: resolve ESLint config from appPath (facebook#9683) * Add AVIF image support (facebook#9611) Co-authored-by: Ian Schmitz <[email protected]> * fix: resolve new JSX runtime issues (facebook#9788) * Upgrade Docusaurus to latest version (facebook#9728) * Replace deprecated eslint-loader with eslint-webpack-plugin (facebook#9751) * Replace deprecated eslint-loader by eslint-webpack-plugin * Update eslintFormatter for eslint-webpack-plugin * fix: always enable jsx-uses-react Co-authored-by: Brody McKee <[email protected]> * Add 3.4.4 to the changelog * Bump resolve-url-loader version (facebook#9841) * Bump resolve-url-loader version * Unpin resolve-url-loader * Fix refreshOverlayInterop module scope error (facebook#9805) * Make eslint-plugin-jest an optional peerDependency (facebook#9670) * feat(eslint-config-react-app): Add jest & testing-library rules (facebook#8963) * feat: Update ESLint dependencies (facebook#9856) * feat: remove unused React imports (facebook#9853) * feat: Update all dependencies (facebook#9857) Co-authored-by: Ian Schmitz <[email protected]> * New JSX Transform opt out (facebook#9861) * Use new JSX setting with TypeScript 4.1.0 (facebook#9734) * Upgrade to React 17 (facebook#9863) * Prepare 4.0.0 alpha release * Pass JSX runtime setting to Babel preset in Jest config (facebook#9865) * Prepare 4.0.0 release * Update CHANGELOG * Add link to Open Collective (facebook#9864) * Update CHANGELOG * Update react dom in error overlay * Prepare 4.0.0 release * Publish - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] * undo antd-package removel Co-authored-by: Michaël De Boey <[email protected]> Co-authored-by: Braedon Gough <[email protected]> Co-authored-by: Andrey Sitnik <[email protected]> Co-authored-by: Kirill Korolyov <[email protected]> Co-authored-by: Iddan Aaronsohn <[email protected]> Co-authored-by: Clément Hallet <[email protected]> Co-authored-by: Brody McKee <[email protected]> Co-authored-by: Adam Charron <[email protected]> Co-authored-by: Ian Schmitz <[email protected]> Co-authored-by: Mostafa Nawara <[email protected]> Co-authored-by: Cory House <[email protected]> Co-authored-by: Michael Schmidt-Voigt <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Sebastian Markbåge <[email protected]> Co-authored-by: Minh Nguyen <[email protected]> Co-authored-by: Dan Abramov <[email protected]> Co-authored-by: Kenneth Skovhus <[email protected]> Co-authored-by: Sten Arthur Laane <[email protected]> Co-authored-by: Jeremy Wadsack <[email protected]> Co-authored-by: Matt Korostoff <[email protected]> Co-authored-by: Hieu Do <[email protected]> Co-authored-by: Alex Krolick <[email protected]> Co-authored-by: Shakib Hossain <[email protected]> Co-authored-by: Ernesto García <[email protected]> Co-authored-by: Eugene Chybisov <[email protected]> Co-authored-by: Tan Li Hau <[email protected]> Co-authored-by: Maaz Syed Adeeb <[email protected]> Co-authored-by: Sam Saccone <[email protected]> Co-authored-by: Nick McCurdy <[email protected]> Co-authored-by: Evan Kennedy <[email protected]> Co-authored-by: Ian Sutherland <[email protected]> Co-authored-by: Chetanya Kandhari <[email protected]> Co-authored-by: Marc Hassan <[email protected]> Co-authored-by: Marc Hassan <[email protected]> Co-authored-by: Joe Haddad <[email protected]> Co-authored-by: Brody McKee <[email protected]> Co-authored-by: Josemaria Nriagu <[email protected]> Co-authored-by: Jeroen Claassens <[email protected]> Co-authored-by: atlanteh <[email protected]> Co-authored-by: Jakob Krigovsky <[email protected]> Co-authored-by: Houssein Djirdeh <[email protected]> Co-authored-by: Burke Holland <[email protected]> Co-authored-by: Anuraag Agrawal <[email protected]> Co-authored-by: Brian Morearty <[email protected]> Co-authored-by: Jeffrey Posnick <[email protected]> Co-authored-by: Dylan Brookes <[email protected]> Co-authored-by: Michael Mok <[email protected]> Co-authored-by: Rafael Quijada <[email protected]> Co-authored-by: Sakito Mukai <[email protected]> Co-authored-by: Andy C <[email protected]> Co-authored-by: Kline Moralee <[email protected]> Co-authored-by: Gerrit Alex <[email protected]> Co-authored-by: Sam Chen <[email protected]> Co-authored-by: Huáng Jùnliàng <[email protected]> Co-authored-by: Stafford Williams <[email protected]> Co-authored-by: Lenard Pratt <[email protected]> Co-authored-by: Simen Bekkhus <[email protected]> Co-authored-by: Webdot_30 <[email protected]> Co-authored-by: Raihan Nismara <[email protected]> Co-authored-by: Eddie Monge Jr <[email protected]> Co-authored-by: Timothy <[email protected]> Co-authored-by: Liam Duffy <[email protected]> Co-authored-by: Tobias Büschel <[email protected]> Co-authored-by: Hongbo Miao <[email protected]> Co-authored-by: Alexey Pyltsyn <[email protected]> Co-authored-by: Clément DUNGLER <[email protected]> Co-authored-by: Johannes Pfeiffer <[email protected]> Co-authored-by: Sai <[email protected]>

pmmmwh added 4 commits July 28, 2020 16:56

chore(deps): bump react refresh plugin

f798725

chore: fix flow error in error overlay index

439c3ab

feat: interop react-error-overlay APIs for refresh plugin

71fabf2

feat: better integrate react-error-overlay and refresh plugin

6077230

pmmmwh requested review from ianschmitz, iansu, mrmckeb and petetnt as code owners July 28, 2020 09:49

facebook-github-bot added the CLA Signed label Jul 28, 2020

mrmckeb approved these changes Jul 28, 2020

View reviewed changes

iansu approved these changes Jul 28, 2020

View reviewed changes

iansu added the tag: enhancement label Jul 28, 2020

iansu added this to the 4.0 milestone Jul 28, 2020

iansu merged commit 66bf7df into facebook:master Jul 28, 2020

justinsilvestre pushed a commit to justinsilvestre/silveste-afa-create-react-app that referenced this pull request Oct 30, 2020

feat: better refresh plugin integration (facebook#9375)

87b3338

This was referenced Mar 30, 2021

[Snyk] Fix for 1 vulnerabilities drich7449/create-react-app#27

Open

[Snyk] Fix for 1 vulnerabilities math4youbyusgroupillinois/create-react-app#32

Open

[Snyk] Fix for 1 vulnerabilities sirinartk/create-react-app#22

Closed

wombleton pushed a commit to AurorNZ/create-react-app that referenced this pull request Jun 1, 2021

feat: better refresh plugin integration (facebook#9375)

d0b4f59

abhiisheek pushed a commit to abhiisheek/create-react-app that referenced this pull request May 19, 2023

feat: better refresh plugin integration (facebook#9375)

de70065

abhiisheek pushed a commit to abhiisheek/create-react-app that referenced this pull request May 24, 2023

feat: better refresh plugin integration (facebook#9375)

94242f5

Omrisnyk mentioned this pull request Apr 15, 2024

[Snyk] Security upgrade react-scripts from 1.1.4 to 4.0.0 Omrisnyk/lock-walker#54

Open

LishuGupta652 pushed a commit to LishuGupta652/create-react-app-1 that referenced this pull request Oct 8, 2024

feat: better refresh plugin integration (facebook#9375)

4bfcc2b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: better refresh plugin integration #9375

feat: better refresh plugin integration #9375

pmmmwh commented Jul 28, 2020 •

edited

Loading

mrmckeb left a comment

iansu commented Jul 28, 2020

feat: better refresh plugin integration #9375

feat: better refresh plugin integration #9375

Conversation

pmmmwh commented Jul 28, 2020 • edited Loading

Changes

Verification/Testing

Questions

mrmckeb left a comment

Choose a reason for hiding this comment

iansu commented Jul 28, 2020

pmmmwh commented Jul 28, 2020 •

edited

Loading