Compilation error when transforming codes with forwardRef introduced

[billstark001]

I cannot reproduce the issue stably (it does not occur in all cases), but the error message when it does occur is:

./node_modules/@wyw-in-js/transform/lib/module.js:225
      throw new EvalError(`${e.message} in${this.callstack.join('\n| ')}\n`);

EvalError: Unable to import "async_hooks". Importing Node builtins is not supported in the sandbox. in ./node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js
| ./node_modules/next/dist/server/route-modules/app-page/module.compiled.js
| ./node_modules/next/dist/server/route-modules/app-page/vendored/ssr/react.js
| ./src/(some component source with forwardRef and styled Linaria components).tsx

The package.json file looks like:

{
  "dependencies": {
    "@linaria/core": "^6.2.0",
    "@linaria/react": "^6.2.1",
    "@wyw-in-js/babel-preset": "^0.5.5",
    "next": "^15.1.4",
    "next-with-linaria": "^0.7.0",
    "react": "^19",
    "react-dom": "^19",
    "react-icons": "^5.4.0"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "19.0.4",
    "@types/react-dom": "^19",
    "autoprefixer": "^10.4.20",
    "eslint": "^9",
    "eslint-config-next": "15.1.4",
    "postcss": "^8",
    "prettier": "^3.4.2",
    "typescript": "5.7.3"
  }
}

Seems like the node builtin module async_hooks is occasionally imported by Next.js if forwardRef is used.

A temporary workaround will be separating styled components and reference-forwarded components into 2 different files. In this way, the error will not be triggered in the transformation.

[Ori-Lev]

Happens in our project as well with the following setup:

{
    "next": "^15.1.7",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "@linaria/core": "^6.2.0",
    "@linaria/react": "^6.2.1",
    "@wyw-in-js/babel-preset": "^0.5.5",
    "next-with-linaria": "^0.7.0",
}

Node.js version: 22.13.0

A very contrived reproduction can be found here:

codesanbox example

I tried using the suggestion of the original reporter to use 2 separate files - one for the reference-forwarded and one for the styled, but it did not help in my case.

also inside - our way going around the issue.

As well, this issue seems to be related to:
callstack/linaria#1421
callstack/linaria#1412

[elektronik2k5]

@billstark001 can you please clarify about this:

A temporary workaround will be separating styled components and reference-forwarded components into 2 different files. In this way, the error will not be triggered in the transformation.

Is this a theory or a practical workaround? If the latter, can you please elaborate or edit the codesandbox above to demonstrate it?

[billstark001]

@elektronik2k5 This is a practical workaround.

The code provided in the sandbox fails because SeparateFile2 imports App and inside it a component BlueButton derived from a reference forwarded component from App is defined.

The following works: link
I used blueButtonClassName to set styles instead of the derived BlueButton, so there won't be any forwardRef get imported in linaria's evaluation. (This is similar to @Ori-Lev's commented-out solution)

Sorry for my original description being not elaborate enough. The key isn't separating files, but keep no forwardRef introduced when a linaria evaluation is needed.