Vite compatibility

[astahmer]

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 **

[saitonakamura]

@astahmer that's awesome! I'm also thinking of using vite for my project, but apparently vite is in kahoots with emscripten output (or whatever they used for yoga-layout-prebuilt). The problem with that PR is pretty outdated and a lot of things were fixed since then (see the changelogs in releases). If you can submit an up-to-date PR with wasm port or help with that, I'd be really thankful

[astahmer]

I tried forking react-three-flex, using the mentioned PR as base branch and rebasing on master but I think I'm stuck
here is the new PR #67

The current PR uses yoga-wasm-slim which lacks a method on the WASM port that is now used on the master branch of react-three-flex (YGNodeGetParent, found here)

The thing is, I do not know how to proceed since the repository of the yoga-wasm-slim package seems deleted or private, and I guess the solution would be to add the binding there ? Or maybe use another yoga wasm port ?

[talentlessguy]

Last version is compatible with Vite, since it uses Vite to run the demo