Yoga npm package version 2.0.0-beta.1 doesn't work with Webpack

[Omxjep3434]

Report

• I have searched existing issues and this is not a duplicate

The new yoga-layout npm package version 2.0.0-beta.1 does not work with Webpack because the compilation environment is recognized as a Node environment, and requiring Node-only modules like 'fs' and 'path' causes Webpack errors.

Issues and Steps to Reproduce

Any Webpack environment can be used, but here is an easy way to reproduce:

Create a fresh project using create-react-app: npx create-react-app yoga-test and then add yoga-layout npm install --save yoga-layout.

Simply add an import statement to a file, such as App.js: import { loadYoga } from "yoga-layout"; and invoke loadYoga: loadYoga().

Start the app: npm run start

You should see a compilation error along the lines of: Module not found: Error: Can't resolve 'fs' in '/path_to_project/node_modules/yoga-layout/binaries'.

Attempts to fix

I can fix the issue in a hacky way by simply deleting the 'if' statement that contains the require statements in node_modules/yoga_layout/binaries/wasm-async.js. The Yoga system does seem to work correctly when I do this, but I have not tested in-depth.

I also attempted to use the node-polyfill-webpack-plugin, but this seems to have no effect and would probably not be a good solution anyway.

What is the correct way to solve this issue?

[NickGerleman]

This is because Emscripten will output “fs” usage in a conditional when told to compile for both Node and web. I thought I had fixed that with another change, but looking at the binary we published, the issue is still there.

A proper fix should come soon, but in the meantime, I think adding the following to your Webpack config might work for Webpack 5:

resolve: {
    fallback: {
        fs: false,
        path: false
    },
},

I think earlier versions of Webpack may polyfill these by default.

[Omxjep3434]

Thanks Nick! That works great and looking forward to the fix!

[NickGerleman]

Fix has been published in yoga-layout@2.0.0-beta.2

[zjt123]

@NickGerleman
how can i get yoga-layout in 2.0.0 version

Could not find com.facebook.yoga.android:yoga-layout:2.0.0-beta.1

Could not find com.facebook.yoga.android:yoga-layout:2.0.0-beta.2

[NickGerleman]

@NickGerleman how can i get yoga-layout in 2.0.0 version

Could not find com.facebook.yoga.android:yoga-layout:2.0.0-beta.1

Could not find com.facebook.yoga.android:yoga-layout:2.0.0-beta.2

This issue is for the yoga-layout npm package. The above names are for the Maven Central package.