Use opencascade.js in Vite program,when I run and then get some error : [ERROR]Could not resolve "a"

Question

My program is typescript + three.js + vue3 + vite . My operation is as follows:

// terminal

npm i opencascade.js@beta
npm i vite-plugin-wasm

// vite.config.js

import { defineConfig } from 'vite'
import wasm from 'vite-plugin-wasm'
export default defineConfig({
  plugins: [
    vue(),
    wasm()
  ],
  optimizeDeps: {
    include: ['file-loader'], 
    // exclude: ['a']
  },
 ...
})

// main.ts

import initOpenCascade from 'opencascade.js';
...
initOpenCascade().then((oc : OpenCascadeInstance) => {
    this.oc = oc;
});

// terminal

npm run dev

// and error

X \[ERROR\] Could not resolve "a"

    vite-plugin-wasm-namespace:D:\fileOrganization\ePro\Cascade_demo\node_modules\opencascade.js\dist\opencascade.full.wasm:43:35151:
      43 │ ...rt as __vite__wasmImport_0_1094, st as __vite__wasmImport_0_1095, tt as __vite__wasmImport_0_1096, ut as __vite__wasmImport_0_1097, vt as __vite__wasmImport_0_1098, wt as __vite__wasmImport_0_1099 } from "a"; 
         ╵                                                                                                                                                                                                                ~~~  

You can mark the path "a" as external to exclude it from the bundle, which will remove this error.

D:\\fileOrganization\\ePro\\Cascade_demo\\node_modules\\esbuild\\lib\\main.js:1636
let error = new Error(`${text}${summary}`);
^

Error: Build failed with 1 error:
vite-plugin-wasm-namespace:D:\\fileOrganization\\ePro\\Cascade_demo\\node_modules\\opencascade.js\\dist\\opencascade.full.wasm:43:35151: ERROR: Could not resolve "a"
at failureErrorWithLog (D:\\fileOrganization\\ePro\\Cascade_demo\\node_modules\\esbuild\\lib\\main.js:1636:15)
.......
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
errors: \[
{
detail: undefined,
id: '',
location: {
column: 35151,
file: 'vite-plugin-wasm-namespace:D:\\fileOrganization\\ePro\\Cascade_demo\\node_modules\\opencascade.js\\dist\\opencascade.full.wasm',
length: 3,
line: 43,
lineText: 'import { a as \__vite__wasmImport_0_0, b as \__vite__wasmImport_0_1, c as \__vite__wasmImport_0_2, d as
........
\__vite__wasmImport_0_315, Ue as \__vite__wasmImport_0_316, Ve as \__vit'... 25155 more
characters,
namespace: '',
suggestion: ''
},
notes: \[
{
location: null,
text: 'You can mark the path "a" as external to exclude it from the bundle, which will remove this error.'
}
\],
pluginName: '',
text: 'Could not resolve "a"'
}
\],
warnings: \[\]
}

Node.js v18.15.0

I don't how to fix it, and I try to get some help from GPT / claude ,but it's not work for this issue with their suggestions.I really hope somebody can help me to fix this , thanks.

I preliminarily infer that this problem is most likely caused by my vite configuration, and the parsing of the .wasm file suffix caused this problem, but the relevant configurations in opencascade.js are all webpack configurations, not vite ones, and I asked to convert the configuration through GPT and it still didn't work.

Jarkko · Accepted Answer · 2023-11-26 21:59:31Z

1

import opencascade from "opencascade.js/dist/opencascade.full.js"
import opencascadeWasm from "opencascade.js/dist/opencascade.full.wasm?url"

const oc = await opencascade({
        locateFile: () => opencascadeWasm,
      })

I got opencascade working with Vite with the above code. No wasm plugin needed. Unfortunately I have no idea what I am doing. It is just copypasted from: https://github.com/donalffons/opencascade.js/blob/template-nuxt-bridge-vite/starter-templates/ocjs-create-nuxt-app-bridge-vite/components/OcApp.vue Hopefully someone with better understanding of Vite and wasm could explain

answered Nov 26, 2023 at 21:59

Jarkko

535 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rmrf Mar 26 at 21:38

where did you get opencascade.full.js? It's not in my node modules when i npm install opencascade

Jarkko Mar 28 at 6:50

Open cascade version I am using: "opencascade.js": "^2.0.0-beta.b5ff984" At least with that version the opencascade.full.js can be found in node modules in opencascade.js/dist/opencascade.full.js

rmrf · Accepted Answer · 2025-03-26 21:37:10Z

I also ran into this issue - take a look here for one discussion:

https://github.com/donalffons/opencascade.js/discussions/238

And for a minimal example on the official repo:

https://github.com/donalffons/opencascade.js/pull/287/files

The core of these links iy modifying your vite.config.ts to the following

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

export default defineConfig({
  plugins: [react(), wasm(), topLevelAwait()],
});

And also add initialization logic

import openCascade from "opencascade.js/dist/opencascade.full.js";
import openCascadeWasm from "opencascade.js/dist/opencascade.full.wasm?url";

export async function initOcc() {
  //@ts-ignore
  return await openCascade({
    locateFile: () => openCascadeWasm,
  });
}

Though I'd strongly suggest following the minimum example setup as the wasm errors can get pretty nasty.

Collectives™ on Stack Overflow

Use opencascade.js in Vite program,when I run and then get some error : [ERROR]Could not resolve "a"

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related