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.

External dependencies are not bundled in the UMD build

See original GitHub issue

Current Behavior

My project has a few dependencies (qs, fast-text-encoding and es-cookie). When I build the UMD bundle, the dependencies are not bundled together with my code.

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('fast-text-encoding'), require('qs'), require('es-cookie')) :
	typeof define === 'function' && define.amd ? define(['exports', 'fast-text-encoding', 'qs', 'es-cookie'], factory) :
	(global = global || self, factory(global.createAuth0Client = {}, null, global.qs, global.Cookies));
}(this, function (exports, fastTextEncoding, qs, Cookies) { 'use strict';
  // ... some code
}));

Expected behavior

I expect all my dependencies to be bundled together with my code

Suggested solution(s)

Maybe it’s a rollup config? I have no idea 😦

Your environment

Software Version(s)
TSDX 0.8.0
TypeScript 3.5.3
Browser n/a
npm/Yarn npm 6.9.0
Operating System windows 10

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:9
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

11reactions
agilgur5commented, Mar 28, 2020

@jimmyn config.external = (id) => false; should work. as should delete config.external. In full form:

tsdx.config.js:

module.exports = {
  rollup(config) {
    if (config.output.format === 'umd') {
      delete config.external;
    }
    return config;
  }
}

What other error did you get? If this were supported internally it would basically look the same.


I’m not totally sure why it’s not the default behavior – I think that’s just historically adopted from microbundle’s behavior (c.f. https://github.com/developit/microbundle/issues/95)

I do think it could make sense to change the default as some other tools do bundle UMD by default. However, there are ways to “import” other libraries into UMD, pending your environment (UMD can be used in Node too). In the browser, you could get your dependencies from CDN to prevent duplication. If we made this the default for UMD, it would make it more difficult to get back the current behavior for external, vs. removing external is fairly easy to configure right now.

4reactions
jimmyncommented, Mar 29, 2020

@agilgur5 your solution works fine for me, thanks. Maybe it is worth mentioning in the documentation somewhere.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to include external dependencies in UMD bundle with ...
I find something from the rollup documentation: If you do want to include the module in your bundle, you need to tell Rollup...
Read more >
How to Bundle JavaScript With Rollup — Step-by-Step Tutorial
Step 4: Add plugins to handle non-ES modules. This is important if any of your dependencies use Node-style modules. Without it, you'll get...
Read more >
How to write and build JS libraries in 2018 - Medium
UMD looks nice, but simple nano-libraries is not a case for it. Solution: ... Just besure that all external dependencies are included to...
Read more >
Nebula build | Qlik Developer Portal
Build a UMD module and an extra ES Module into directory /core ... are treated by Nebula build as external dependencies that are...
Read more >
Externals - webpack
Prevent bundling of certain import ed packages and instead retrieve these external dependencies at runtime. For example, to include jQuery from a CDN ......
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