Please note: I am utilizing create-react-app along with three.js v0.99.0.
In my current project, I am faced with the challenge of importing specific modules from three.js to avoid bundling the entire library, which results in a large uncompressed file size of 0.5MB. While most direct imports from src/ work without issues, some specific cases are causing unexpected behavior.
import { Geometry } from "three";When attempting to import the Geometry module directly by changing the import path as shown above:
import { Geometry } from "three/src/core/Geometry";I noticed that certain features, such as a line on a graph, were no longer rendering without any error messages. Similarly, trying to import WebGLRenderer from a specific path also led to disastrous consequences:
import { WebGLRenderer } from "three"; // previous import
import { WebGLRenderer } from "three/src/renderers/WebGLRenderer"; // modified import
This resulted in an error message referencing 'WebGLIndexedBufferRenderer.js:14 Uncaught TypeError: Cannot read property 'type' of undefined'. Upon comparing the definitions of these modules in the three.js library, it was observed that there were no apparent differences between the original and the source folder version.
Upon further investigation, it seems that Webpack, utilized by create-react-app, may be transpiling the imported code differently based on its location within or outside the src/ folder:
ƒ Geometry() {
Object.defineProperty(this, 'id', {
value: geometryId += 2
});
this.uuid = _math_Math_js__WEBPACK_IMPORTED_MODULE_10__["_Math"].generateUUID();
...
Compared to:
ƒ Geometry() {
Object.defineProperty(this, 'id', {
value: geometryId += 2
});
this.uuid = _Math.generateUUID();
...
This discrepancy raises the question of whether Webpack is interfering with imports specifically from the src/ directory, despite the code being identical. Is there a way to configure Webpack to only transpile code within the project's own src/ folder and leave third-party modules untouched?