Convert Webpack UMD to Native ES Module

Question

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 common format these days.

This doesn't import so well

import { mat4 } from 'https://cdnjs.cloudflare.com/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.com/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 commonjs 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?

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 comes across this.