3MF Loader Module Not Found Error

I have the following code on the codesandbox below:


Where I attempt to import the ThreeMFLoader

import { Canvas } from "@react-three/fiber";
import { useEffect, useState, useRef } from "react";
import { ThreeMFLoader } from "three/addons/loaders/3MFLoader.js";

function Test({ savedFile }) {
  // The file is then passed here
  console.log("Test Is Rendered");
  const [objectMesh, setObjectMesh] = useState();
  useEffect(() => {
    console.log("UseEffect Called");
    let reader = new FileReader();
    reader.addEventListener("loadend", (event) => {
      let result = event.target.result;
      let loader = new ThreeMFLoader();
      let parsedResult = loader.parse(result);
  }, [savedFile]);
  return <primitive object={objectMesh} />;

export default function App() {
  const [savedFile, changeSavedFile] = useState(null);
  // When the user uploads a file, it is saved tothe App State
  return (
    <div className="App">
      <input type="file" onChange={(e) => changeSavedFile(e.target.files[0])} />
      <Canvas>{savedFile && <Test savedFile={savedFile} />}</Canvas>

Why does it cause an import error:

ModuleNotFoundError: Could not find module in path: ‘three/addons/loaders/3MFLoader.js’ relative to ‘/src/App.js’

Try putting this before all your other scripts are loaded in the html ?

    <script type="importmap">
        "imports": {
            "three": "https://threejs.org/build/three.module.js",
            "three/addons/": "https://threejs.org/examples/jsm/"

This is the HTML now with the script you suggested. I am still getting the error.

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <title>React App</title>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <script type="importmap">
        "imports": {
          "three": "https://threejs.org/build/three.module.js",
          "three/addons/": "https://threejs.org/examples/jsm/"
    <div id="root"></div>

If you are using a codesandbox, you can install/import three (it’s installed automatically with r3f), and use the following import:
import { ThreeMFLoader } from "three/examples/jsm/loaders/3MFLoader.js"

1 Like