How to load a module dynamically?

[thdoan]

I'm trying to use Parcel to build a three.js project, but it's not working when I try to load another module dynamically.

index.html:

import WebGL from 'three/examples/jsm/capabilities/WebGL';

if (WebGL.isWebGLAvailable()) {
  const elScript = document.createElement('script');
  elScript.src = 'js/3d_demo.js';
  elScript.type = 'module';
  document.body.appendChild(elScript);
} else {
  document.body.prepend(WebGL.getWebGLErrorMessage());
}

3d_demo.js:

import {
  MathUtils,
  Object3D,
  PerspectiveCamera,
  Scene,
} from 'three';

I reckon since Parcel is not aware of the imports in 3d_demo.js, they are not included in the bundle, so the app fails. What is the proper way to load these modules IFF WebGL.isWebGLAvailable() returns true?