Import ES6 modules installed with NPM

Questions
1

Is it possible to:
import * as THREE from ‘/some / path / installed / by / npm’
Directly in web browser?

Everyone is recommending bundler like webpack.
I was hoping to load directly into the browser during development, without webpack.
I’ve also tried symlink to node_modules, but those paths seem different and THREE can’t find its sub dependencies.

I also see people using import from ‘https://unpkg/’ , but that doesn’t seem to work when you finally want to bundle it with webpack.

Ideal scenario is enabling the same ES6 import paths to work in both Webpack and Browser.

2

You CAN use ES6 imports directly in the browser without a bundler. However you need to specify type attribute “module” for your script and provide full path with a file extension, egg:

<script type="module">
import * as THREE from './node_modules/three/build/three.module.js';
import { GLTFLoader } from './node_modules/three/examples/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const gltfLoader = new GLTFLoader();

...
</script>
3

Thanks DolphinIQ, I have tried that. I symlink to node_module for static file server. Seems the problem with this method is that if your modules import other dependencies those paths are different and break.

For example, try this:

import * as THREE from ‘/node_modules/three/three.module.js’;
import { Interaction } from “/node_modules/three.interaction/three.interaction.module.js”;

This returns error: Uncaught TypeError: Failed to resolve module specifier “three”. Relative references must start with either “/”, “./”, or “…/”.

Also , this method means you can’t keep same paths in source code for both Webpack and Direct Browser loading.

4

I haven’t used it myself yet, but it sounds like https://www.snowpack.dev/ might be pretty close to what you want? Or at least, it makes local development simpler/faster compared to many bundlers, and still lets you bundle your final production output.

5

snowpack works, Thanks donmccurdy!