Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix CRA error overlay clashing with fast-refresh overlay #41

Closed

Conversation

charrondev
Copy link

@charrondev charrondev commented Feb 29, 2020

Related #7

The 2 error overlays were clashing. What I've done is

  • Forked the CRA webpack entry and removed all warning & error handling. I added that to the src directory of the this package.
  • Update the CRA example to use the local dev server entry from the package.

Additionally I've added a README section on setting up this project with create-react-app in addition to the other setup instructions.

Expected

If you clone the repo, run the CRA example, then create some import/syntax error

  • The new fast-refresh error overlay appears.
  • If you fix the error, the overlay disappears.

Unresolved in this PR

  • There was a webpack conflict with the CRA example. The latest version of CRA wants webpack@4.41.5, but this repo doesn't have any top-level lockfile and as a result brings in a different, newer version of webpack. Actually resolving this in a robust way would likely require some type of monorepo tooling to make the examples separate private packages with their own independant dependency tree. In the meantime, I added an .env file to bypass this check.
  • In order for the file to be able to be modified locally, I used the local devServer entry instead of the one from the published package. Ideally the whole example would use the local package so that users without publish access on this repo could work with it. But when I try to modify the main entry to point to it, I get errors like this:

Module not found: You attempted to import /Users/adamcharron/git/react-refresh-webpack-plugin/src/runtime/utils.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

In order to resolve this, once again I think some sort of monorepo tooling would be required so that the full local package would end up symlinked into `node_modules` and imported per-usual. Using `yarn link` or `npm link` seems to work but there's not really a good way to keep that checked into source control without additional tooling like lerna or yarn workspaces. **In the meantime, I left the main refresh entry pointing to the published NPM module and just pointed the dev server entry over the local package.**

@charrondev charrondev changed the title Fix CRA error overlay clashing Fix CRA error overlay clashing with fast-refresh overlay Feb 29, 2020
@charrondev
Copy link
Author

charrondev commented Mar 4, 2020

Closing in favour of #44

@charrondev charrondev closed this Mar 4, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant