''mergeBufferGeometries' is not exported by node_modules
I am following the tutorial here https://ifcjs.github.io/info/docs/Hello%20world to get IFC.js working with rollup as a bundler. I am doing everything as explained in the tutorial and I can also bundle normal JS files.
Yet, when I add the code from the tutorial and then run npm run build I get the error:
[!] Error: 'mergeBufferGeometries' is not exported by node_modules/three/examples/jsm/utils/BufferGeometryUtils.js, imported by node_modules/web-ifc-three/IFCLoader.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/web-ifc-three/IFCLoader.js (4:9)
I don't think this error is specific to rollup, because I also configured webpack to bundle it and it throws a similar error. Everything compiles fine until I add the following Import statement: import { IFCLoader } from "web-ifc-three/IFCLoader"; which is copied from the tutorial.
The full code I am using from the tutorial:
import {
AmbientLight,
AxesHelper,
DirectionalLight,
GridHelper,
PerspectiveCamera,
Scene,
WebGLRenderer,
} from "three";
import {
OrbitControls
} from "three/examples/jsm/controls/OrbitControls";
//Creates the Three.js scene
const scene = new Scene();
//Object to store the size of the viewport
const size = {
width: window.innerWidth,
height: window.innerHeight,
};
//Creates the camera (point of view of the user)
const aspect = size.width / size.height;
const camera = new PerspectiveCamera(75, aspect);
camera.position.z = 15;
camera.position.y = 13;
camera.position.x = 8;
//Creates the lights of the scene
const lightColor = 0xffffff;
const ambientLight = new AmbientLight(lightColor, 0.5);
scene.add(ambientLight);
const directionalLight = new DirectionalLight(lightColor, 1);
directionalLight.position.set(0, 10, 0);
directionalLight.target.position.set(-5, 0, 0);
scene.add(directionalLight);
scene.add(directionalLight.target);
//Sets up the renderer, fetching the canvas of the HTML
const threeCanvas = document.getElementById("three-canvas");
const renderer = new WebGLRenderer({
canvas: threeCanvas,
alpha: true
});
renderer.setSize(size.width, size.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
//Creates grids and axes in the scene
const grid = new GridHelper(50, 30);
scene.add(grid);
const axes = new AxesHelper();
axes.material.depthTest = false;
axes.renderOrder = 1;
scene.add(axes);
//Creates the orbit controls (to navigate the scene)
const controls = new OrbitControls(camera, threeCanvas);
controls.enableDamping = true;
controls.target.set(-2, 0, 0);
//Animation loop
const animate = () => {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
};
animate();
//Adjust the viewport to the size of the browser
window.addEventListener("resize", () => {
size.width = window.innerWidth;
size.height = window.innerHeight;
camera.aspect = size.width / size.height;
camera.updateProjectionMatrix();
renderer.setSize(size.width, size.height);
});
import { IFCLoader } from "web-ifc-three/IFCLoader";
// Sets up the IFC loading
const ifcLoader = new IFCLoader();
ifcLoader.ifcManager.setWasmPath("wasm/");
const input = document.getElementById("file-input");
input.addEventListener(
"change",
(changed) => {
const file = changed.target.files[0];
var ifcURL = URL.createObjectURL(file);
ifcLoader.load(
ifcURL,
(ifcModel) => scene.add(ifcModel));
},
false
);
And my config of rollup:
import resolve from '@rollup/plugin-node-resolve';
export default {
input: 'src/index.js',
output: [
{
format: 'esm',
file: 'src/bundle.js'
},
],
plugins: [
resolve(),
]
};
Can anyone help? Would be much appreciated, thanks in advance.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
