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.

Answer 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