Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Failed to work when react is external and loaded via standalone script

See original GitHub issue

With HTML template like:

<script src="https://cdn.jsdelivr.net/npm/react@16.12.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16.12.0/umd/react-dom.production.min.js"></script>

And a webpack config including:

{
    externals: {
        react: 'React',
        'react-dom': 'ReactDOM',
    }
}

This plugin fails to work.

I’d like to dive into it a little, but with little knowledge about webpack I’m not sure I can find any valuable ideas.

Issue Analytics

State:
Created 4 years ago
Reactions:3
Comments:14 (6 by maintainers)

Top GitHub Comments

2reactions

pmmmwhcommented, Dec 24, 2020

FWIW I’ve verified this with the plugin.

OK - closing this for now.

react-refresh 0.9.0 react 16.9.0 react-dom 16.9.0 @pmmmwh externals still not work. I checked this in example/webpack-dev-server, add
<script type="text/javascript" src="//unpkg.com/react@16.9.0/umd/react.production.min.js"></script>
<script type="text/javascript" src="//unpkg.com/react-dom@16.9.0/umd/react-dom.production.min.js"></script>
in index.html <head>, and add externals in webpack.config.js.

The PRODUCTION build will not work.

0reactions

qiaoqiaowangcommented, Dec 22, 2020

FWIW I’ve verified this with the plugin.

OK - closing this for now.

react-refresh 0.9.0 react 16.9.0 react-dom 16.9.0 @pmmmwh
externals still not work. I checked this in example/webpack-dev-server, add

<script type="text/javascript" src="//unpkg.com/react@16.9.0/umd/react.production.min.js"></script>
<script type="text/javascript" src="//unpkg.com/react-dom@16.9.0/umd/react-dom.production.min.js"></script>
in index.html <head>, and add externals in webpack.config.js.

Top Results From Across the Web

React - issues with loading an external script - Stack Overflow

I did create my app with create-react-app and I don't succeed loading an external script. Surprisingly I didn't find any help online or...

Add React to a Website

Add React in One Minute · Step 1: Add a DOM Container to the HTML · Step 2: Add the Script Tags ·...

Iframes with React: Best Practices | by Andrea Perera

Embedding an Iframe inside a React app comes with some risks where Iframe will load content outside your control unless you take the...

The Recommended Setup - Single SPA

Alternatively, you may use global variables and <script> elements. An example of using SystemJS to load microfrontends with module federation can be found ......

ts-node - npm

There are 7251 other projects in the npm registry using ts-node. ... REPL; Write standalone scripts; Native ESM loader; Use third-party ...