Next.js installation guide not working (repo included)

[adamkrim]

Describe the issue

Hi 👋

I followed the Next.js installation guide for react-strict-dom, but the setup doesn’t work and I get errors.

To make it easier to reproduce, I created a minimal repo that follows the docs exactly:
👉 https://github.com/adamkrim/nextjs-react-strict-dom

Could you confirm if the instructions are up to date, or share a working Next.js example?

Thanks!

Expected behavior

Following the instructions, the app should run with styles applied.

Steps to reproduce

Follow the instructions of the doc from a fresh nextjs install, or clone the repo: https://github.com/adamkrim/nextjs-react-strict-dom

1. pnpm i
2. pnpm run dev

Test case

https://github.com/adamkrim/nextjs-react-strict-dom

Additional comments

No response

[necolas]

I get errors

What errors do you get?

This line should just be style={} not {...css.props}:
https://github.com/adamkrim/nextjs-react-strict-dom/blob/main/src/app/components/button.tsx#L13

[adamkrim]

Thanks @necolas for the tip 🙏

I’m still running into issues though. Here’s what I did step by step:

1. Got the error:
   Module not found: Can't resolve 'babel-loader'
   → Fixed by installing babel-loader with pnpm i babel-loader.

2. Then got the error:
   Error: Cannot find module 'autoprefixer'
   → Fixed by installing autoprefixer with pnpm i autoprefixer.

3. After that, running pnpm dev gave:
   Error: Unknown option: .cacheDirectory
   → I removed the cache option from babelLoader.config.mjs and kept it only in next.config.ts.
   → That removed the error.

4. Now I’m stuck with:
   Error: Unexpected 'stylex.create' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.

If I try with --turbopack, I hit another error:

Error evaluating Node.js code
TypeError: Cannot read properties of undefined (reading 'createHash')

I updated my example repo at the step I’m currently blocked on.

Thanks for helping 🙏

[MoOx]

@adamkrim checkout changes in #383

[javascripter]

I added additional notes in the PR with a working example repo. See #383 (comment) for details.

[necolas]

@javascripter I cloned that repo and it seems to work. But not out-of-the-box when importing forked RSD components (i.e., with *.web.js extensions) from other packages.

#391

[javascripter]

@necolas

But not out-of-the-box when importing forked RSD components (i.e., with *.web.js extensions) from other packages.

Yes, the updated config looks right and we do have similar resolveExtensions in our prod app as well.

I simply forgot to include it in the repo because we also added config for react-native-web in our next.js app to support legacy codebase and put resolveExtensions there, similar to how Solito configures it.

When importing other packages, you can usetranspilePackages option to transpile packages.

I think this issue can be closed now?

[MoOx]

Maybe after closing #383 ?

[necolas]

Docs have been updated and working example included in the repo now

[belgamo]

@necolas I did a manual next installation and followed the updated RSD docs, but still hit the Unknown option: .cacheDirectory error. Removing the cacheDirectory property fixes the issue.