You might need @babel/runtime regenerator-runtime to fix "path" error

[BMCwebdev]

I am using StyleX to build our design system component library. Unfortunately we couldn't use Remix and had to pivot to Nextjs. It's been rough since. Really looking forward to the CLI working with node_modules (aka the component library and the tokens library).

Anyways, today I had a developer who was trying to start up their own Nextjs app to begin a new project with our component library. When running pnpm run dev they would get the error

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

Sadness ensued and a lot of grumbling at the need of the babelrc file (that's what seemed to be the major culprit because if you removed it, no more error). I was able to finally get the error to spit out something more specific:

 ⨯ ./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/client/app-call-server.js
Error: Failed to resolve "@babel/runtime/regenerator" relative to "/Users/xxx/Development/new-app"

running the following ended up clearing up the issue. Our other app has some AWS Amplify stuff installed that apparently also already installed regenerator (it was not in the package.json but was available for the build)

pnpm add @babel/runtime regenerator-runtime

So, just wanted to share that here, might save someone some time.

[nmn]

There is a community SWC plugin that might be worth a try as well. Will be looking into the implementation in the future and try to support its continued development.

[derekjwilliams]

Reproducing The Error

I have the same issue here, also occurs in the example next project (https://github.com/facebook/stylex/tree/main/examples/example-nextjs). I did some investigation and it appears that it started happening at version 0.3.0. I have been using the SWC plugin so I had not run into this issue until I tried to put together a simple demo. I forked https://github.com/jherr/stylex-demo to https://github.com/derekjwilliams/stylex-demo.

Here is a version that uses version 0.2.0-beta.27 and works https://github.com/derekjwilliams/stylex-demo/tree/main/starter

Here is a version that uses version 0.3.0 and breaks https://github.com/derekjwilliams/stylex-demo/tree/main/starter-updated-stylex-0.3.0

The error is:

Error: Failed to resolve "@babel/runtime/regenerator" relative to "~/development/stylex-demo/starter-updated-stylex-0.3.0"

Interesting Caveat

If you successfully build the version that uses version 0.2.0-beta.27 and then update package.json to use version 0.3.0 then the build works (npm run build). however, if you delete the .next folder and then do a build with version 0.3.0 then the build breaks.

The fix

npm install -D @babel/runtime

Updated package.json

{
  "name": "next-app-dir-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "predev": "rimraf .next",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@mdx-js/loader": "^3.0.0",
    "@mdx-js/react": "^3.0.0",
    "@next/mdx": "^14.0.3",
    "@stylexjs/open-props": "^0.3.0",
    "@stylexjs/stylex": "^0.3.0",
    "@types/mdx": "^2.0.10",
    "bright": "^0.8.4",
    "next": "14.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.23.2",
    "@babel/plugin-syntax-flow": "^7.22.5",
    "@babel/plugin-syntax-jsx": "^7.22.5",
    "@babel/plugin-syntax-typescript": "^7.22.5",
    "@babel/runtime": "^7.26.10",
    "@stylexjs/babel-plugin": "^0.3.0",
    "@stylexjs/eslint-plugin": "^0.3.0",
    "@stylexjs/nextjs-plugin": "^0.3.0",
    "@types/node": "20.8.10",
    "@types/react": "18.2.20",
    "@types/react-dom": "18.2.7",
    "eslint": "8.52.0",
    "eslint-config-next": "14.0.1",
    "rimraf": "^5.0.5",
    "typescript": "5.2.2"
  }
}

What About More Recent Versions of StyleX

Version 0.11.1 exhibits the same issue, see https://github.com/derekjwilliams/stylex-demo/tree/main/starter-updated-stylex-0.11.1

The StyleX Next example seems to have same issues, see the example here: https://github.com/facebook/stylex/tree/main/examples/example-nextjs