This issue happens only on webpack (or other module bundler) and only when using whs with three dependencies together.

Reason

Some time ago I experienced a problem when was developing a website with webpack + whs + three combination. I had some bugs that are hard to debug.

Explanation of problem that happens

WHS points to it build file build/whitestorm.js which is a UMD implementation of whs and three together. And when you also import three like that:

import * as WHS from 'whs';
import * as THREE from 'three';

It will result into a following order of bundled files:

bundle.js

• whs [UMD]
  • three.js <- 1
  • whs wrapper (components, modules, ...)
• three.js <- 2
• other modules

See that three.js dependency is bundled twice. It's incorrect.

Solution

The solution is simple - move three.js to whs externals. So instead of:

<script src="whitestorm.js"></script> <!-- ~600Kb -->

You'll have:

<script src="three.js"></script> <!-- ~500Kb -->
<script src="whitestorm.js"></script> <!-- ~100Kb -->

Version:

• v2.x.x
• v1.x.x

Issue type:

• Bug
• Proposal/Enhancement
• Question