We're currently working on a project with Next.js and Three.js (react-three-fiber). After clearing the cache in the browser, the 3d model was not shown anymore. We get some errors. Actually one warning an one error (multiple times). The error is
Uncaught (in promise) RuntimeError: abort(TypeError: WebAssembly.instantiate(): Import #0 module="env" error: module is not an object or function). Build with -s ASSERTIONS=1 for more info.
We do use some environment variables but don't especially import the module "env". The parameter ("-s ASSERTIONS=1") didn't work for us.
The other warning which appears at the start of the console output is this:
failed to asynchronously prepare wasm: TypeError: WebAssembly.instantiate(): Import #0 module="env" error: module is not an object or function
The error sometimes appears and sometimes it doesn't, we don't know why.
Thanks for anything
Edit:
"dependencies": {
"@heroicons/react": "^1.0.1",
"@next/env": "^11.1.2",
"@react-three/drei": "^2.2.13",
"@tweenjs/tween.js": "^18.6.4",
"autoprefixer": "^10.2.5",
"axios": "^0.21.1",
"drei": "^2.2.13",
"framer-motion": "^4.1.8",
"iso-3166-1": "^2.0.1",
"jwt-decode": "^3.1.2",
"moment": "^2.29.1",
"next": "^11.0.0",
"postcss": "^8.2.12",
"react": "^17.0.2",
"react-country-flag": "^2.3.0",
"react-dom": "^17.0.2",
"react-fps-stats": "^0.1.3",
"react-icons": "^4.2.0",
"react-loader-spinner": "^4.0.0",
"react-select": "^4.3.1",
"react-simple-maps": "^2.3.0",
"react-spring": "^8.0.27",
"react-three-fiber": "^5.3.11",
"react-time-ago": "^6.2.2",
"react-tooltip": "^4.2.21",
"swr": "^0.5.5",
"tailwindcss": "^2.1.1",
"three": "^0.124.0",
"use-asset": "^1.0.4"
},
"devDependencies": {
"eslint": "^7.24.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-next": "^11.0.0",
"eslint-config-prettier": "^8.2.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-security": "^1.4.0",
"eslint-plugin-simple-import-sort": "^7.0.0",
"eslint-plugin-sonarjs": "^0.6.0",
"eslint-plugin-tailwindcss": "^1.13.2",
"eslint-plugin-unicorn": "^30.0.0",
"husky": "^6.0.0",
"lint-staged": "^10.5.4",
"prettier": "^2.2.1"
}
In our case we were setting the draco decoder path to:
https://www.gstatic.com/draco/v1/decoders/
by calling:
this.dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
But their recommended way is specifying the version in the URL:
https://www.gstatic.com/draco/versioned/decoders/1.4.3/
They released a new version yesterday, which explains the sudden errors: https://github.com/google/draco/releases/tag/1.4.3
Changing to the versioned URL fixed it for us. Another fix that worked was using JS instead of Webassembly:
this.dracoLoader.setDecoderConfig({ type: "js" });