Dynamic import of ES6 modules with fallback to systemJS

Camille Hodoul
Jul 19, 2018 · 1 min read

Update: A similar but more elegant solution can be found in the rollup-starter-code-splitting repo.

If you code-split your Javascript app and dynamically import modules, you may output your chunks in ES6 modules for compatible browsers and provide a fallback solution (something like systemJS) for older browsers.

If you do so, you will run into a problem with browsers that support ES6 modules but don’t support dynamic imports (for example, Firefox 60).

These browsers will use <script type=”module”> tags (and ignore <script nomodule>) but will throw when they encounter an import() call in the middle of your code.

I asked for help in the Rollup issues, and Guy Bedford came to my help with this solution, which I hope can save someone else a headache :

This will display an error in the console on Firefox 60 (and the other browsers in the same situation) but should be transparent to the user.

You can see this approach implemented in the Rollup code-splitting example project.

If you have a better answer to this problem, please share it in the issues or here.

Camille Hodoul

Written by

Web dev — https://camillehdl.dev/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade