Description
Hey,
The problem
I was trying to use @react-three/flex in a vite based project (instead of the current example that uses CRA) but I landed on multiple issues.
**EDIT: Actually I fixed it while writing this, so I guess I should still post it for anyone that is in the same situation.
Scroll to the bottom for the solution. **
Naive installation
Uncaught ReferenceError: _a is not defined ... at node_modules/yoga-layout-prebuilt/yoga-layout/dist/entry-browser.js (:3000/node_modules/.vite/@react-three_flex.js?v=63c167e0:27914)
Which can be solved either by replacing the string of the problematic file or by adding <script>window._a = undefined;</script> in the index.html
Then there is an issue with ‘@babel/runtime/helpers/esm/extends’
react-dom.development.js:11340 Uncaught TypeError: e[h(...)] is not a function
at index.js:formatted:1
Used in those lines
default:
return e[`set${h(n2)}`](i2);
And I couldn't find a solution for that, so I tried looking for issues/PR and stumbled upon this one #37
yoga wasm PR
Then I
- added it as package.json dependency with
"react-three-flex": "pmndrs/react-three-flex#37/head" - added the corresponding vite.resolve.alias
{ find: "@react-three/flex", replacement: "./node_modules/react-three-flex/src/index.ts" }, - included it in deps vite
optimizeDeps: { include: ["@react-three/flex"] },
Which spawns another problem
index.js:1 Uncaught (in promise) RuntimeError: abort(RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.). Build with -s ASSERTIONS=1 for more info.
at z (index.js:1)
at index.js:1
Something that might be worth noting is that this PR seems quite outdated so that might just be the reason (since i'm getting this log index.js:1 npm install react-three-fiber is deprecated, use @react-three/fiber instead!)
repro repository here, using the Text component from https://codesandbox.io/embed/7psew
Solution
**EDIT: follow the steps from the yoga wasm PR section and then add this file in /public/yoga.wasm **