[Bug]: Static pre-rendering issues in nextjs TypeError: Cannot read properties of null (reading 'useContext')

[niconatalie]

What happened?

Running build with bazel produce this error, while building without bazel works fine

TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (/home/johndoe/.cache/bazel/_bazel_johndoe/25d004fb5c04e5a88a6bfa9d50504171/execroot/__main__/bazel-out/k8-fastbuild/bin/node_modules/.aspect_rules_js/[email protected]/node_modules/react/cjs/react.production.min.js:24:118)
    at useSWRConfig 
...

We created sample repositories to reproduce the issues, please take a look https://github.com/niconatalie/bazel-nextjs

Version

Development (host) and target OS/architectures:

Output of bazel --version: bazel 5.4.0

Version of the Aspect rules, or other relevant rules from your
WORKSPACE or MODULE.bazel file:

• rules_js-1.15.1
• rules_ts-1.0.4
• rules_swc-0.21.3

Language(s) and/or frameworks involved:

• Next.js

How to reproduce

Sample code and how to reproduce 
https://github.com/niconatalie/bazel-nextjs

Any other information?

No response

Fund our work

• Sponsor our open source work by donating a bug bounty

[gregmagolan]

It looks like your starting point in your repro was https://github.com/aspect-build/bazel-examples/tree/main/next.js but its on an out-of-date rules_js, rules_ts & rules_swc version. Could you please try using the latest https://github.com/aspect-build/bazel-examples/tree/main/next.js was your starting point?

[niconatalie]

thanks for your reply @gregmagolan, I updated it

[pwalker]

I think I've also run into this problem. I've got another repro here, and I've got a possible workaround. I think the issue is related to whenever I install package (that would get bundled with next.js) that has react as a peer dependency. There could be other ways to trigger it, but this is how I came across it.

The workaround I found was to use the transpilePackages option in the next.config.js file. If I add the package I see in the error into the transpilePackages list, the issue goes away. https://github.com/pwalker/rules_js-nextjs-build-repro#workaround

Hope this helps!

[purkhusid]

I'm also encountering this exact bug. Using the latest version of all the Aspect rules. My feeling is that this is related to React being loaded from multiple places. Are there any known issues regarding this @gregmagolan ? If not, what is the best way to debug this sort of thing, my NodeJS-fu is limited so any pointers are appreciated.

[purkhusid]

I just wanted to update since i figured out the problem. The issue was not with rules_js but with an interaction between NextJS, MaterialUI and Emotion. The issue can be viewed in these GH issue:
emotion-js/emotion#3032
vercel/next.js#49898

The solution to fixing until NextJS solves this is to add this to your NextJS config:

experimental: {
    esmExternals: false,
  }