Dynamic import of ES6 modules with fallback to systemJS

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.