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

react-hot-loader breaks the page without react #1159

Open
a1ooha opened this issue Jan 22, 2019 · 7 comments
Open

react-hot-loader breaks the page without react #1159

a1ooha opened this issue Jan 22, 2019 · 7 comments

Comments

@a1ooha
Copy link

a1ooha commented Jan 22, 2019

Description

My project has a lot of pages, some of which don't use react, react-hot-loader breaks these pages.

Expected behavior

no react-hot-loader code in the js of the page.

Actual behavior

image
image

i add react in webpack externals, but do not add cdn link in this page. and react-hot-loader requires it, so "React is not defined", but i really don't need react. If i remove react-hot-loader/babel in .babelrc or remove react in externals or add cdn link in this page, everything will be ok.

Environment

React Hot Loader version: 4.2.0

Run these commands in the project folder and fill in their results:

  1. node -v: 8.11.3
  2. npm -v: 6.4.0

Reproducible Demo

.babelrc

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "node": "current",
                    "browsers": ["Android >= 4", "iOS >= 8", "last 3 versions"]
                }
            }
        ],
        "react"
    ],
    "plugins": [
        "transform-object-assign",
        "react-hot-loader/babel",
        "transform-class-properties",
        [
            "transform-runtime",
            {
                "polyfill": false,
                "regenerator": true
            }
        ]
    ]
}

webpack externals

externals: {
    vue: 'Vue',
    react: 'React',
    'react-dom': 'ReactDOM',
    'prop-types': 'PropTypes',
}
@theKashey
Copy link
Collaborator

Why you need React-Hot-Loader then?

@a1ooha
Copy link
Author

a1ooha commented Jan 22, 2019

Why you need React-Hot-Loader then?

Some of pages used react, and some simple page didn't. and they are in one project.

@theKashey
Copy link
Collaborator

Ok. Got the point. Probably that’s easy to fix.

@a1ooha
Copy link
Author

a1ooha commented Jan 22, 2019

Ok. Got the point. Probably that’s easy to fix.

So, what should i do to fix this problem?

@theKashey
Copy link
Collaborator

You can’t do it. It should be fixed inside RHL.
The best you may do - create a “broken” example I could convert to a test later.

@theKashey
Copy link
Collaborator

Ok. It's not possible to fix this issue from React-Hot-Loader side.

How to fix it:

  • you have to create window.React variable. An empty one.
  window.React = null;
  • you may do it instead of including React from CDN
  • you may create a file and require it before react-hot-loader
  • you will have to specify safetyNet: false option for RHL babel plugin (which is NOT released yet)

@a1ooha a1ooha closed this as completed Jan 26, 2019
@theKashey
Copy link
Collaborator

The change was not released yet

@theKashey theKashey reopened this Jan 26, 2019
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

No branches or pull requests

2 participants