Cannot read properties of null (reading 'key') in Nextjs app when you refresh the page or change routes

[zachtball]

Current behavior:

I have a component library that I am bundling as an ESModule with Vite. I am consuming this library in a Nextjs app. The Nextjs app was setup with this example from the official MUI examples.

I am importing a component from my library into my /about page in the Nextjs app. When I start the app it loads up fine and I can go to the /about route and see my component with its styles being applied. But if I refresh the page while still on that route I get the error TypeError: Cannot read properties of null (reading 'key')

The error happens on this line of bundled code
className += cache.key + "-" + serialized.name; inside of the withEmotionCache function.

I saw another issue where this was caused by multiple versions of @emotion/cache, but I have verified that isn't the case in my App. npm ls @emotion/cache as well as the other emotion dependencies shows only one version of each.

My library used to be bundled with the UMD format which worked fine, its only when switching to ESModule format that is breaking. I also tried using webpack instead of Vite and got the same error.

To reproduce:

1. clone https://github.com/zachtball/nextjs-mui-test
2. run yarn to install dependencies
3. run yarn dev to start app
4. go to localhost:3000 and click the Go to the about page link
5. Refresh the page

Expected behavior:

No error about cache being null

Environment information:

• react version: 18.2.0
• @emotion/react version: 11.10.0
• @emotion/cache version: 11.10.1
• @emotion/server version: 11.10.0

[Andarist]

Most likely you are bundling Emotion deps. You should keep them as external to your library

[zachtball]

Most likely you are bundling Emotion deps. You should keep them as external to your library

Hi! Thanks for the quick response and all of your hard work.

I have zero dependencies in my component library. Only peer dependencies. I am listing all peer dependencies as externals already. https://github.com/zachtball/mui-test-lib/blob/main/vite.config.ts

[Andarist]

You were still bundling a lot of things from Emotion because this way you were only externalizing exact matches. So @emotion/react/jsx-runtime got pulled in (as it wasn't matched by external) and transitively a lot of of other things got pulled in.

Please apply this patch:

diff --git a/vite.config.ts b/vite.config.ts
index ebbee0e..288f857 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,7 +7,15 @@ import { dirname, resolve } from 'path';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-const externals = Object.keys(pkg.peerDependencies);
+const makeExternalPredicate = (externalArr: string[]) => {
+  if (externalArr.length === 0) {
+    return () => false;
+  }
+  const pattern = new RegExp(`^(${externalArr.join('|')})($|/)`);
+  return (id: string) => pattern.test(id);
+};
+
+const externals = makeExternalPredicate(Object.keys(pkg.peerDependencies));
 
 export default defineConfig({
   plugins: [

[zachtball]

That did it! Thank you so much!