I'm trying to work strictly using native ES Modules without transpiling my own code but often times I will find a third party library that is packaged with Webpack and babel as a UMD which seems to be the most mon format these days.

This doesn't import so well

import { mat4 } from '.4.0/gl-matrix.js'

Results in

SyntaxError: The requested module does not provide an export named 'mat4'

I don't think UMD should really be called universal.

Sure I could import the src directly but then I have to take on whatever babel configuration they may have. I'm trying to avoid transpiling any of my code and I just want to transpile all UMD node_modules to use within my code.

What I'm looking for is the opposite of this:

I want to convert from UMD to ES. This way I could trust that the library has transpiled away anything non standard and I can import it as normal. I've searched the web but I didn't find anything. I tried the monjs to es modules plugin but it didn't work because the export declarations weren't at the top level.

Does anyone know if there is a plugin that does this or can anyone provide some ideas on how they deal with this type of scenario?

I'm trying to work strictly using native ES Modules without transpiling my own code but often times I will find a third party library that is packaged with Webpack and babel as a UMD which seems to be the most mon format these days.

This doesn't import so well

import { mat4 } from 'https://cdnjs.cloudflare./ajax/libs/gl-matrix/2.4.0/gl-matrix.js'

Results in

SyntaxError: The requested module does not provide an export named 'mat4'

I don't think UMD should really be called universal.

Sure I could import the src directly but then I have to take on whatever babel configuration they may have. I'm trying to avoid transpiling any of my code and I just want to transpile all UMD node_modules to use within my code.

What I'm looking for is the opposite of this: https://www.npmjs./package/babel-plugin-transform-es2015-modules-umd

I want to convert from UMD to ES. This way I could trust that the library has transpiled away anything non standard and I can import it as normal. I've searched the web but I didn't find anything. I tried the monjs to es modules plugin but it didn't work because the export declarations weren't at the top level.

Does anyone know if there is a plugin that does this or can anyone provide some ideas on how they deal with this type of scenario?

• javascript
• webpack
• babeljs

• There isn't really a way to convert from UMD to ES6 in a guaranteed way. You'd have to wait for every module you want to use to publish ES6 versions, which isn't likely yet because the ecosystem as a whole hasn't really settled on the right way to do that. – loganfsmyth Commented Jan 26, 2018 at 21:07
• I would have thought you could just at least export the global as a default pretty reliably. – Shannon Poole Commented Jan 26, 2018 at 21:16
• **Didn't mean to send that yet. Something like this: const self = {}; ...webpackoutput ... export default self; – Shannon Poole Commented Jan 26, 2018 at 21:18
• 2 So my concern is if I am writing a library that I want to be consumable and I want to include a third party library like gl-matrix then I have to bundle my library with webpack to use it properly. Then the consumer of my library has to and it causes this long chain of everyone having to use webpack. And we will all just endlessly be waiting for everyone else to make native ES module distributions. When webpack should really just be run once at the application level. If webpack could output to ES Module then I would just use it here. – Shannon Poole Commented Jan 27, 2018 at 2:13
• 3 Bundlers are nice for production apps. But in my experience they are awful for dev experience. Bundle times can be long, so small changes are slower to iterate. Breakpoints in sourcemaps don't always work correctly. Test running is more plicated. If I'm writing standard native code that runs in all major browsers without transpilation I' rather not deal with a bundler to develop my code. So in order to use the third party UMD I have to figure out how to get the UMD into my dev workflow. It seems like there is no easy way to do this and everybody just keeps saying use webpack. – Shannon Poole Commented Jan 27, 2018 at 12:57

1 Answer 1

After 2 years of struggling with dealing with third party libraries when writing ESM code I think the folks over at snowpack.dev have a really nice solution.

So I am going to leave this as an answer for anyone else that es across this.