Three.js specific imports failing, possibly Webpack's fault

Question

Disclaimer: I'm using create-react-app and three.js v0.99.0 .

I'm trying to import specific three.js modules, since importing straight from the root module includes the entire library in the bundle, which is 0.5MB uncompressed. Most direct src/ imports work fine, however when importing Geometry, AKA changing this:

import { Geometry } from "three";

to this:

import { Geometry } from "three/src/core/Geometry";

The line on my graph that it was drawing no longer appears, and there's no error messages. In addition, importing the WebGLRendered straight from src/ caused the whole thing to implode:

import { WebGLRenderer } from "three"; // from this
import { WebGLRenderer } from "three/src/renderers/WebGLRenderer"; // to this

with the error:

WebGLIndexedBufferRenderer.js:14 Uncaught TypeError: Cannot read property 'type' of undefined
    at WebGLIndexedBufferRenderer.setIndex (WebGLIndexedBufferRenderer.js:14)
    at WebGLRenderer.renderBufferDirect (WebGLRenderer.js:505)
    at renderObject (WebGLRenderer.js:932)
    at renderObjects (WebGLRenderer.js:913)
    at WebGLRenderer.render (WebGLRenderer.js:790)
    at SceneManager.js:75
    ...

I checked the definitions of these modules in the three.js library, and they are literally copy pasted between three.module.js and src/ , so there's no code differences I can find. However, one thing I did notice is that if I import both and print them, Webpack seems to be transpiling the one I import from src/ :

ƒ Geometry() {
  Object.defineProperty(this, 'id', {
    value: geometryId += 2
  });
  this.uuid = _math_Math_js__WEBPACK_IMPORTED_MODULE_10__["_Math"].generateUUID();
  ...

as opposed to:

ƒ Geometry() {
  Object.defineProperty(this, 'id', {
    value: geometryId += 2
  });
  this.uuid = _Math.generateUUID();
  ...

is it possible that create-react-app 's Webpack is messing with imports that are within a src/ folder, thus making them not work despite the source code being identical? If so, is there a way to make it only transpile code within MY src/ folder, and not the 3rd partiy modules'?

Answer 1

It's probably a babel issue. By default, babel won't transpile anything in node_modules , however you're importing from the ES6 source, so you need to force it to transpile these. In your webpack config, you should have a rule (in module.rules) for js(x) files that looks something like

{
  test: /\.jsx?$/,
  use: 'babel-loader'
}

add a custom exclude that will exclude everything in node_modules except the three files, ie

{
  test: /\.jsx?$/,
  exclude: /node_modules\/(?!three)/,
  use: 'babel-loader'
}