diff --git a/src/components/core/theme-provider/emotion-cache.tsx b/src/components/core/theme-provider/emotion-cache.tsx
index 67b6e4ba8..ca0a3b902 100644
--- a/src/components/core/theme-provider/emotion-cache.tsx
+++ b/src/components/core/theme-provider/emotion-cache.tsx
@@ -54,7 +54,7 @@ export default function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionC
     let styles = '';
     let dataEmotionAttribute = registry.cache.key;
 
-    const globals: { name: string; style: string }[] = [];
+    const globals: { name: string; style: string | undefined }[] = [];
 
     inserted.forEach(({ name, isGlobal }) => {
       const style = registry.cache.inserted[name];
@@ -63,7 +63,7 @@ export default function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionC
         if (isGlobal) {
           globals.push({ name, style });
         } else {
-          styles += style;
+          styles += style || "";
           dataEmotionAttribute += ` ${name}`;
         }
       }
@@ -74,7 +74,7 @@ export default function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionC
         {globals.map(
           ({ name, style }): React.JSX.Element => (
             <style
-              dangerouslySetInnerHTML={{ __html: style }}
+              dangerouslySetInnerHTML={{ __html: style || "" }}
               data-emotion={`${registry.cache.key}-global ${name}`}
               key={name}
             />