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.

[kissedbysnow]

Is there any latest solution to this problem?

[wojtekmaj]

Solutions don't change weekly. Read through the thread.

[kissedbysnow]

My level is limited. I read it twice and tried a lot, but still can’t solve it.

[alnaranjo]

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

This worked for me. Thanks a lot

[karlhorky]

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)

@KatFishSnake I had a similar issue with Yoga.Overflow being undefined (our app is using tsx, which may have different ESM / CommonJS module resolution), leading to an error when the property Yoga.Overflow.Hidden is accessed:

file:///Users/k/p/courses/node_modules/@react-pdf/layout/lib/index.js:2192
  hidden: Yoga.Overflow.Hidden,
                        ^

TypeError: Cannot read properties of undefined (reading 'Hidden')
    at file:///Users/k/p/courses/node_modules/@react-pdf/layout/lib/index.js:2192:25
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:123:5)

Workaround 1 (downgrade to @react-pdf/layout@3.6.4)

The workaround of downgrading to @react-pdf/layout@3.6.4 via npm Overrides, Yarn Resolutions or pnpm Overrides appears to work:

{
  "overrides": {
    "@react-pdf/layout": "3.6.4"
  }
}

Workaround 2 (upgrade to yoga-layout@3.0.4)

Applying the patch from @wojtekmaj's PR by hand using patch-package and then using pnpm Overrides to upgrade to yoga-layout@3.0.4 works too, although it is a bit brittle:

• https://github.com/diegomura/react-pdf/pull/2711#issuecomment-2166818022

[MaxTwentythree]

What are we supposed to do when we don't use webpack (I'm on meteor for example)? On node 20 I get the "Cannot find module 'yoga-layout'" error no matter which @react-pdf/renderer and @react-pdf/layout version I'm using. On node 14 it at least worked with locking @react-pdf/layout to 3.6.4.

Edit: Somehow with removing node_modules and reinstalling the node packages it now works with node 20 and the locked versions @react-pdf/layout: 3.6.4 and @react-pdf/renderer: 3.1.14.

Still the problem is there for newer versions and I'm having a hard time understanding it. If I understand it correctly, files are not resolved correctly if both a ts and a js version exist (as is the case with yoga-layout). But why does it even matter, shouldn't they contain the same code and as long as one of them resolved it's fine?

[laminmk]

can someone help me solve this error?

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,

webpack compiled with 1 error (05b2b0b974e03a93) No errors found.

[millsjere]

This is how I resolved mine.

1. Inside the "wrapAssembly.js" file --> "var _YGEnums = _interopRequireWildcard(require("./generated/YGEnums.js"));"
2. Inside the "wasm-async-web.js" file --> "var _YGEnums = require("../generated/YGEnums.js");"

The main issue is that from the default import -> require("./generate/YGEnums") the file loaded is a .ts file into a .js file

[sibelius]

upgrade to react-pdf v4

[karlhorky]

Indeed, it seems @react-pdf/layout@4.0.0 resolved this issue.

@takethefake @diegomura @wojtekmaj I guess this issue can be closed now?