Yoga-layout v2 leads to failing builds

[takethefake]

Describe the bug I migrated today from 3.1.14 to 3.1.17 and received the following error while deploying.

+ yarn run deploy
/azp/_work/1/s/node_modules/yoga-layout/src/generated/YGEnums.ts:10
export enum Align {
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1274:20)
    at Module._compile (node:internal/modules/cjs/loader:1320:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
    at Object.require.extensions.<computed> [as .ts] (/azp/_work/1/s/node_modules/ts-node/src/index.ts:1608:43)
    at Module.load (node:internal/modules/cjs/loader:1197:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1013:12)
    at Module.require (node:internal/modules/cjs/loader:1225:19)
    at require (node:internal/modules/helpers:177:18)
    at Object.<anonymous> (/azp/_work/1/s/node_modules/yoga-layout/src/wrapAssembly.js:10:1)

this seems to be related to the migration to yoga-layout@2.01. I for now downgraded to @react-pdf/layout:3.6.4 via resolutions.

[jjose230391]

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

[kxc184]

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

[diegomura]

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

[gpark-vs]

Any guys are using old node version like 12, needed to modify package-lock.json to use a specific version of @react-pdf/layout or might be needed to npm shrinkwrap to keep child dependencies safe. package-lock.json itself would be override by npm install

https://stackoverflow.com/questions/15806152/how-do-i-override-nested-npm-dependency-versions

[diegomura]

While modifying @react-pdf/layout version manually in lock files work, bare in mind it's a workaround and the lib will move forward and might break at some point your setup by using older sub-dependencies

[Eezi]

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.)

[wojtekmaj]

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.

[gaphel1]

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

[takethefake]

I'm currently using an AWS cdk NodeJsFunction with Node 18 and no special props that leads to a failing

      this.#lambda = new NodejsFunction(scope, `${props.lambda.name}Lambda`, {
        entry: props.lambda.entry,
        handler: "handler",
        functionName: props.lambda.name,
        runtime: Runtime.NODEJS_18_X,
        timeout: Duration.seconds(29),
        role: this.#lambdaExecutionRole,
        memorySize: 768,
        vpc: props.lambda.vpc,
        vpcSubnets: props.lambda.vpc ? props.lambda.vpcSubnets : undefined,
        securityGroups: props.lambda.securityGroups,
        logRetention: props.lambda.logRetention,
        bundling: {
          sourceMap: true,
          minify: true,
          keepNames: true,
          externalModules: ["aws-sdk", "aws-cdk*"],
        },
        environment: props.lambda.environment,
        layers: props.lambda.layers,
      });

tmk: this uses esbuild under the hood

[betofrasson]

Module not found: Can't resolve 'yoga-layout'

any suggestion?

[bduimstra]

Instead of putting it in the overrides, try adding @react-pdf/layout in the dependencies part of your package.json

Also be sure to nuke you node_modules and package-lock after making those changes.

[vivekdhiman007]

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?

[ThaiDQ-FE]

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?

what's ur version node? I using version 14.17.3 and when using renderer v3.1.14 and layout v3.6.3 still Module not found: Can't resolve 'yoga-layout' in @react-pdf/layout/lib

[t4ggno]

Same problem. Node v20.9.0.

[fs-nathan]

Hello, any update on this issue ?

[wojtekmaj]

Hello, any...

REPRODUCIBLE EXAMPLES? 🙏😁

Can't get it breaking on my setup!

[saynesy]

any updates?

[t4ggno]

Hello, any...

REPRODUCIBLE EXAMPLES? 🙏😁

Can't get it breaking on my setup!

If I have later or tomorrow enough time, I will create an example and upload it on GitHub.

[ooga]

I have the same error on my project. We are using Webpack and at some time in the build it tries to load YGEnums.ts and fail.

If I rename this file, it works fine !!!

Not really a fix but it may help to understand the problem

[umkame]

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

[umkame]

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

[vivekdhiman007]

Before you guys updated it to the latest version I was using 3.3.4 and it was working fine, the only issue with that version was flickering of whole page when updating data using useState, now when I tried to reuse the same it showed error of module not found: yoga-layout. To reproduce this now you just need to install it with older version of node as I was using v14, it will show the error @wojtekmaj

[shesha4kr]

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?

I am using rendered v3.1.14 and layout v3.6.4. Rendering is not working in this case too. Getting this error on console: TypeError: a is not a function at 349.js:2:35575 at 349.js:2:8769 at Array.map () at 349.js:2:36708 at 349.js:2:8769 at 349.js:2:36967 at wi (349.js:2:248593) at 349.js:2:253600 at Object.measure (349.js:2:215458) at 349.js:2:211401

Has anyone got the solution for this?

[wojtekmaj]

@vivekdhiman007 Node.js is not officially supported, we can't support it even if we wanted to, as there are dependencies that already don't officially support Node.js 14 (yoga-layout is an ESM module, so I'd expect issues below Node.js 16 for sure).

If you can reproduce the error on Node.js 18 at minimum, we could look into this.

[wojtekmaj]

@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.

[lyhourchhen]

@wojtekmaj please check out my reproduce repo, I just setup with nx and react and it won't work. https://github.com/lyhourchhen/react-pdf-reproduce-bug, I belive this relate to webpack5 & i also tried with vite and it working fine.

[wojtekmaj]

Try adding

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

to Webpack config.

[shesha4kr]

@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:

[Abdullah-Nazardeen]

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

[wojtekmaj]

@shesha4kr This is completely unrelated to this thread. Please raise a separate issue.

[wojtekmaj]

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.

[shesha4kr]

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

[shesha4kr]

@shesha4kr This is completely unrelated to this thread. Please raise a separate issue.

The repo which I shared will work fine if you add "@react-pdf/layout": "3.6.4" in dependency list. But PDF rendering will stop working with same error in console which I mentioned earlier

[wojtekmaj]

@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!

[takethefake]

I fixed the Error on my side by adjusting my build configuration. I am using cdk which has set a default for --prefer-ts-exts in the ts-node call (see https://github.com/aws/aws-cdk/pull/11470). In my case removing this worked, but could not be done in every cdk project.

Nevertheless, yoga-layout should not include the ts-files in the build, or am I wrong?

[T-Mohamed-adam]

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

Can you provide more details

[harvey56]

re-installing the latest version of react-pdf helped to get rid of that issue for me.

npm i react-pdf

[eleversa]

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

[KatFishSnake]

Had this issue

2209 |     return node;
2210 |   };
2211 | };
2212 |
2213 | var OVERFLOW = {
2214 |   hidden: Yoga__namespace.Overflow.Hidden,
              ^
TypeError: undefined is not an object (evaluating 'Yoga__namespace.Overflow.Hidden')
at /node_modules/.pnpm/@react-pdf+layout@3.11.2/node_modules/@react-pdf/layout/lib/index.cjs:2214:10
at globalThis (/node_modules/.pnpm/@react-pdf+layout@3.11.2/node_modules/@react-pdf/layout/lib/index.cjs:3876:18)
at overridableRequire (:1:20)
at /node_modules/.pnpm/react-pdf-html@1.2.0_@react-pdf+renderer@3.1.14_react@18.2.0/node_modules/react-pdf-html/node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js:14:4
at globalThis (/node_modules/.pnpm/react-pdf-html@1.2.0_@react-pdf+renderer@3.1.14_react@18.2.0/node_modules/react-pdf-html/node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js:4420:1)
at overridableRequire (:1:20)
at /node_modules/.pnpm/react-pdf-html@1.2.0_@react-pdf+renderer@3.1.14_react@18.2.0/node_modules/react-pdf-html/dist/renderers.js:8:6
at globalThis (/node_modules/.pnpm/react-pdf-html@1.2.0_@react-pdf+renderer@3.1.14_react@18.2.0/node_modules/react-pdf-html/dist/renderers.js:122:18)

this is what I had in package.json

"@react-pdf/renderer": "3.3.8",

tried every solution suggested above, didn't work

updated bun, - worked

bun -v
1.0.12

curl -fsSL https://bun.sh/install | bash
######################################################################## 100.0%
bun was installed successfully to ~/.bun/bin/bun
Run 'bun --help' to get started

bun -v
1.0.29

[T-Mohamed-adam]

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

[Jpm91297]

@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?

[ooga]

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\""
  }
}

[ryanpratama14]

@shesha4kr I got this error too. Did you resolve this?

[shesha4kr]

@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?

Mine was webpack issue. I did the changes in webpack.config.js as suggested

[shesha4kr]

@shesha4kr I got this error too. Did you resolve this?

Mine was webpack issue.

[ryanpratama14]

@shesha4kr could you share your webpack config?

[shesha4kr]

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

@ryanpratama14 refer this repo.

[shesha4kr]

@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!

@ryanpratama14 and this was the fix

[ryanpratama14]

@shesha4kr many thanks!

[DangHuy071195]

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)\/).*/ } ..... ]