''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