react-pdf: Yoga-layout v2 leads to failing builds

I think it’s more a Webpack issue

A simple workaround

{
  "scripts": {
    "postinstall": "npm run fix:react-pdf",
    "fix:react-pdf": "mv ./node_modules/yoga-layout/src/generated/YGEnums.ts ./node_modules/yoga-layout/src/generated/YGEnums_bkp.ts || echo \"not found or already processed\""
  }
}

@shesha4kr thank you so much. It all comes down to this line in your Webpack config:

  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
  },

You specifically configured Webpack to prefer .ts files over .js files, everywhere, INCLUDING in node_modules, and yet you specifically excluded parsing .ts files in node_modules (which is the right thing to do):

      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: { loader: "babel-loader" },
      },

Change it like this:

  resolve: {
-   extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
+   extensions: [".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json"],
  },

as suggested earlier and it works like a charm!

Try adding

  resolve: {
    extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']
  }

to Webpack config.

Same problem. Node v20.9.0.

This has to do with module resolution in yoga-layout. In src/entrypoint/asmjs-async-web.js, they do: var _YGEnums = require("../generated/YGEnums");. Now the interesting bit is that both src/generated/YGEnums.js AND src/generated/YGEnums.ts exist.

Whatever tool you’re using to bundle your code:

• Resolves the above dependency to .ts file
• …but fails to parse it.

To resolve this, we would need to look at specific tool configuration where the bug is likely to be found.

I have also got this issue 279.4 ERROR in ./node_modules/yoga-layout/src/generated/YGEnums.ts 10:7 279.4 Module parse failed: Unexpected token (10:7) 279.4 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders 279.4 | // @generated by enums.py 279.4 | 279.4 > export enum Align { 279.4 | Auto = 0, 279.4 | FlexStart = 1, 279.4 @ ./node_modules/yoga-layout/src/entrypoint/asmjs-sync-web.js 9:15-46 279.4 @ ./node_modules/@react-pdf/layout/lib/index.js 13:0-42 1532:11-34 1532:37-55 1532:58-68 279.4 @ ./node_modules/@react-pdf/renderer/lib/react-pdf.browser.js 11:0-47 4194:19-33 279.4 @ ./src/pages/webReporting/pages/WebReporting/WebReporting.tsx 279.4 @ ./src/pages/webReporting/WebReportingLayout.tsx 1:0-61 4:27-39 279.4 @ ./src/pages/App.tsx 279.4 @ ./src/App.tsx 7:0-40 123:129-138 125:31-40 279.4 @ ./src/index.tsx 10:0-24 30:32-35 54:32-35 279.4 279.4 webpack 5.75.0 compiled with 1 error in 268339 ms

Dockerfile:14

12 | COPY . . 13 |
14 | >>> RUN npm run build 15 |
16 | # nginx state for serving content

ERROR: failed to solve: process “/bin/sh -c npm run build” did not complete successfully: exit code: 1. any idea

Getting this after installing react-pdf/renderer:

ERROR in ./node_modules/yoga-layout/src/generated/YGEnums.ts 10:7 Module parse failed: Unexpected token (10:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | // @generated by enums.py |

export enum Align { | Auto = 0, | FlexStart = 1, @ ./node_modules/yoga-layout/src/entrypoint/wasm-async-web.js 11:15-46 @ ./node_modules/@react-pdf/layout/lib/index.cjs 13:11-33 @ ./node_modules/@react-pdf/renderer/lib/react-pdf.browser.cjs 14:21-49 @ ./src/pages/LoginPage.tsx 164:17-47

webpack 5.90.3 compiled with 1 error in 5575 ms

Module not found: Can’t resolve ‘yoga-layout’

any suggestion?

I am also experiencing similar issue in Jest when running my unit test on node 14.12.0.

Cannot find module 'yoga-layout/sync' from 'node_modules/@react-pdf/layout/lib/index.cjs.js'

I agree with OP Upgraded yoga to v2 and removed bundled package seems to be the issue.

Adding overrides to @react-pdf/layout:3.6.4 (version before removing @react-pdf/yoga) to package.json temporarily resolves issue.

Screenshot

This issue is most likely due to using a very old node version (like 12 mentioned above) or old bundlers that do not support exports entrypoints in package.json. I recommend bumping both

my node version is 20.1.0 and still having this issue

when using renderer v3.1.14 and layout v3.6.3 it works but, the iframe it generates is left blank, therefore rendering is still not working with old versions. has anyone found fix for this issue?

This has to do with module resolution in yoga-layout. In src/entrypoint/asmjs-async-web.js, they do: var _YGEnums = require("../generated/YGEnums");. Now the interesting bit is that both src/generated/YGEnums.js AND src/generated/YGEnums.ts exist.

Whatever tool you’re using to bundle your code:

• Resolves the above dependency to .ts file
• …but fails to parse it.

To resolve this, we would need to look at specific tool configuration where the bug is likely to be found.

I had the problem below when starting the project after installed react-pdf. The problem was caused by the newest version 3.1.17. After I changed the version to the 3.1.14 it started working. The problem was that the package.json had “@react-pdf/renderer”: “^3.1.14” which automatically installed the newest version 3.1.17. After I removed the "^" it installed the correct old version.

(The command meteor npm install --save yoga-layout didn’t fix the problem, it just gave the same error again.)

Describe the bug Hello, I’m experiencing an issue when installing “@react-pdf/renderer”: “3.1.17” and “@react-pdf/layout”: “3.6.4”. It’s showing the error “Module not found: Can’t resolve ‘yoga-layout/sync’.” I’m using Node version 12. help!!!

i’m using webpack and in my wepack config i’m using with rules for ts file and exclude node_modules except yoga-layout and moduleX as below. It’s worked for me and I forgot where I found the solution =)) rules: [ { test: /.tsx?$/, use: ‘ts-loader’, exclude: /node_modules/(?!(yoga-layout|moduleX)/).*/ } … ]

@shesha4kr This is an error from the bundled, minified version of your code. We can’t tell what’s crashing. You’ll have to either reproduce the error on non-minified version of your code or ship source maps along with your code so that we could see what is actually the cause.

@wojtekmaj Hi, please refer this screenshot:

@shesha4kr In the same exact boat as you, were you able to find a solution?

Hello, any… REPRODUCIBLE EXAMPLES? 🙏😁 Can’t get it breaking on my setup!

1. Create a new react project using latest using latest Node.js and react-scripts
2. Type ‘npm install @react-pdf/renderer --save’
3. Booom! Project failed to start with 'Module not found: Can’t resolve ‘yoga-layout’

Wich examples are you need? It broken from ‘Starting with react-pdf is extremely simple.’ - line of your documentation

Started a new project using CRA and following your instructions, and it worked just fine:

That's why reproducible examples, like broken repo, broken CodeSandbox or something, are needed if you want help.

Hi, please refer this repo where the issue can be replicated: https://github.com/shesha4kr/react-pdf-example

@wojtekmaj , Hey, hi. i am using node version 18.18.2. and still receiving this error.

@shesha4kr This is an error from the bundled, minified version of your code. We can’t tell what’s crashing. You’ll have to either reproduce the error on non-minified version of your code or ship source maps along with your code so that we could see what is actually the cause.

@wojtekmaj Hi, please refer this screenshot:

Hello, any…

REPRODUCIBLE EXAMPLES? 🙏😁

Can’t get it breaking on my setup!

You quick-start guide is reproducible example. After fresh project creation and adding react-pdf every project stop working

any updates?

Hello, any…

REPRODUCIBLE EXAMPLES? 🙏😁

Can’t get it breaking on my setup!

Hello, any update on this issue ?