search

pmndrs / react-three-flex

💪📦 Flexbox for react-three-fiber
MIT License
1.65k stars 42 forks source link

Vite compatibility #66

Closed astahmer closed 2 years ago

astahmer commented 2 years ago

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 https://github.com/pmndrs/react-three-flex/pull/37

yoga wasm PR

Then I

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 commented 2 years ago

@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 commented 2 years ago

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 https://github.com/pmndrs/react-three-flex/pull/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 commented 2 years ago

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