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.

Support ES module import in browser

See original GitHub issue

Hi again,

I tested the library with angular and it is running into an error:

universalModuleDefinition:1 Uncaught ReferenceError: global is not defined
    at universalModuleDefinition:1:1
    at Object.9424 (universalModuleDefinition:1:1)
    at __webpack_require__ (bootstrap:19:1)
    at Module.1896 (home.component.html:14:263)
    at __webpack_require__ (bootstrap:19:1)
    at Module.721 (universalModuleDefinition:1:1)
    at __webpack_require__ (bootstrap:19:1)
    at Module.23 (app.component.html:6:8)
    at __webpack_require__ (bootstrap:19:1)
    at Module.8835 (environment.ts:16:71)

Which is expected as the angular team came to the conclusion to not support global in their webpack build for broad compatibility.

I think this library should not rely on some other process to supply the variable. So going forward you could use:

Workaround is adding (window as any).global = window; to polyfill.ts

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:64 (33 by maintainers)

github_iconTop GitHub Comments

promontiscommented, Aug 27, 2022

@Elringus @Aloento do you know why we sometimes get the bodyJs is not defined while we do not get this using CRA?

DanielHabenichtcommented, May 1, 2022

The “problem” with web modules (ES) is that they are incompatible with older package runtimes as they add the export keyword which may not be supported.

So, I support @Aloento view of generating an ES module first and then using rollup to create UMD/CommonJs, because generating them from ES modules is easy whereas generating ES modules from UMD is not feasible.

But in the end this is way more work than any of us should invest for this problem. The great thing is I found this PR: Which suggests the second edit:

+var getGlobal = function () {
+    if (typeof self !== "undefined") {
+        return self;
+    }
+    if (typeof window !== "undefined") {
+        return window;
+    }
+    if (typeof global !== "undefined") {
+        return global;
+    }
+    throw new Error("unable to locate global object");
+var global = getGlobal();
-})(this, () =>
+})(typeof self !== "undefined" ? self : this, () =>

Making it work in angular, and at least loading as web module:

<script type="module">
    import * as dotnet from "./Project/bin/dotnet.js";

    window.onload = async function () {
        await window.dotnet.boot();
        const guestName = window.dotnet.HelloWorld.GetName();
        console.log(`Welcome, ${guestName}! Enjoy your global space.`);

But running into an error:

dotnet.js:10763 Uncaught (in promise) ReferenceError: bodyJs is not defined
    at Object.bind_method (dotnet.js:10763:49)
    at s (dotnet.js:8876:64)
    at Object.bindings_lazy_init (dotnet.js:8887:49)
    at Object.bind_static_method (dotnet.js:10849:42)
    at p (dotnet.js:13734:38)
    at boot (dotnet.js:13980:34)
    at async Object.exports.boot (dotnet.js:14138:9)
    at async window.onload (global-module.html:9:9)
Read more comments on GitHub >

github_iconTop Results From Across the Web

JavaScript modules - MDN Web Docs
Use of native JavaScript modules is dependent on the import and export statements; these are supported in browsers as shown in the ...
Read more >
JavaScript modules via script tag | Can I use... Support tables ...
Loading JavaScript module scripts (aka ES6 modules) using <script type="module"> Includes support for the nomodule attribute. Usage % of. all users, all tracked ......
Read more >
Using ES modules in browsers with import-maps
ES modules have wide browser support currently. Some of the features around ES modules such as dynamic import (allowing function based imports) ...
Read more >
Super Simple Start to ESModules in the Browser
All major browsers support ESModules now. Here's how to get started using them.
Read more >
ES modules in service workers -
Static imports only # ... ES modules can be imported in one of two ways: either statically, using the import ... from '...'...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found