Error when loading rhino3dm.js on a NextJs/React project

Rhino Developer rhino3dm
,
1

Hi,

I am trying to use rhino3dm.js on a NextJs/React project.

export default function Home() {
  const onClick = useCallback(() => {
    rhino3dm().then((Module) => {
      const sphere = new Module.Sphere([0, 0, 0], 16);
      console.log(`rhino3dm sphere:${sphere.radius}`);
    });
  }, []);

  return (
    <div className={styles.container}>
      <main>
        <h1>Rhino Compute Test</h1>
        <button onClick={onClick}> Load rhino3dm</button>
      </main>
    </div>
  );
}

When executing the promise rhino3dm().then() some problems come along trying to load the wasm file and the next error appear:

rhino3dm.js?6024:9 Uncaught (in promise) RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.
    at abort (rhino3dm.js?6024:9:13992)
    at getBinary (rhino3dm.js?6024:9:14705)
    at eval (rhino3dm.js?6024:9:15077)

I have tried some settings on webpack but non of them had worked so far. Currently this is my current settings on next.config.js:

const nextConfig = {
  reactStrictMode: true,
  future: {
    webpack5: true,
  },
  webpack: (config, { dev }) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
    };
    config.experiments = {
      asyncWebAssembly: true,
      syncWebAssembly: true,
    };
    return config;
  },
};

module.exports = nextConfig;

I also tried to put the wasm file on my public directory but that did not work either.

To replicate the error, I just created a nextjs project with rhino3dm and the above code in here.

I am unsure what could help me to solve my current error so any help would be very much appreciated.

2

I am having the same issue, and what I did is not what I would call a solution, but it does make things work in dev.

So I went to the debugger in my browser and found that the rhino3dm.js script is looking for rhino3dm.wasm in E:\GitLab\BIM-tests\.next\static\chunks\pages which is where next puts compiled files.

Screenshot (28)
Screenshot (28)997×265 14.7 KB

So I put the .wasm file from the node_module there

This makes my program run, however I don’t know the correct way to make next (or rhino3dm) look for or ship the script in a place that makes sense.

Also side note, very funny that you and I both run into this issue at the same time as I started trying this yesterday and was looking here for an answer to this questions as well :stuck_out_tongue_winking_eye:

1 Like
3

I was able to (with the help of copy-webpack-plugin) automate this. All I needed to do was add that node module then update my next.config.js

/** @type {import('next').NextConfig} */

const CopyPlugin = require("copy-webpack-plugin");

const nextConfig = {
  reactStrictMode: true,
  webpack5: true,
  webpack: (config) => {
    
    config.resolve.fallback = { fs: false };

    config.plugins.push(
      new CopyPlugin({
        patterns: [
          { from: "node_modules/rhino3dm/rhino3dm.wasm", to: "static/chunks/pages/"}
        ]
      })
    )

    return config;
  },
}

module.exports = nextConfig

I would also prefer that this not be required but for now this is what we’ve got to work with I suppose.

I hope this helps!

1 Like
4

Thanks @brandon.m.davis , very much appreciated!, apologies for the late response, got side tracked as I noticed as well that someone solved this issue in Vue.

And while jumping in this wagon, I agree also with Chuck_Driesler:

This appears to be a hacky way to force any emscripten generated wasm to hop over whatever webpack is trying to do with it.

1 Like
5

You can also reference it in your index.html