question-mark
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.

UMD build doesn't work via import in the browser (TypeError: Cannot set property 'React' of undefined)

See original GitHub issue

When importing the UMD build (both production and development) in the browser – that is, from a <script type="module"> – an error is thrown: TypeError: Cannot set property 'React' of undefined.

The relevant code:

12: (function (global, factory) {
13:	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
14:	typeof define === 'function' && define.amd ? define(factory) :
15:	(global.React = factory());
16: }(this, (function () { 'use strict';

Throws on line 15 as globalthis is undefined in a module context.
Is this as simple to fix as passing this || self on line 16, or is there a catch?

Do you want to request a feature or report a bug? bug

What is the current behavior? TypeError: Cannot set property 'React' of undefined

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. https://jsfiddle.net/dja3wfc7/ (Updated)

What is the expected behavior? I would expect the import to work, as the same file works if included via <script src=...>.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React 16.7.0 (latest stable) – I have found another UMD related bug, #3037, which pertains to React 0.12.2. I have tried that version and indeed it works, it can be imported. Chrome 71, Safari 12 tested (probably all browsers)

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
gaearoncommented, Jan 19, 2019

It’s not expected that UMD imports would work with import — you want ESM builds (which we don’t offer yet).

1reaction
gaearoncommented, Feb 8, 2019

I don’t remember a particular reason. If you send a PR upgrading Rollup we can look at it!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Uncaught TypeError: Cannot read property 'call' of undefined ...
My best guess is that some parameters are set to default in production mode and not in dev mode and this causes the...
Read more >
Output - webpack
To make UMD build available on both browsers and Node.js, set output.globalObject option to 'this' . Defaults to self for Web-like targets.
Read more >
mongoose typeerror: cannot read properties of undefined ...
I'm working on a little project with NextJS and just added mongoDB & mongoose and seriously struggling with an error. I'm trying to...
Read more >
React Stripe.js reference | Stripe Documentation
Want to see how React Stripe.js works or help develop it? Check out the project on ... Once the stripe prop has been...
Read more >
microbundle - npm
Zero-configuration bundler for tiny JS libs, powered by Rollup.. Latest version: 0.15.1, last published: 4 months ago. Start using ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found