[v3] Fix TypeError: _jsx is not a function for remote content on deve…

…lopment environment (#2629) * aa * use const * fix tests, minify css vars
shuding · Jan 15, 2024 · c74ae90 · c74ae90
1 parent 0271704
commit c74ae90
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 14 deletions.
diff --git a/.changeset/old-bears-invent.md b/.changeset/old-bears-invent.md
@@ -0,0 +1,6 @@
+---
+'nextra': patch
+---
+
+Fix TypeError: \_jsx is not a function for remote content on development
+environment
diff --git a/packages/nextra-theme-docs/src/components/head.tsx b/packages/nextra-theme-docs/src/components/head.tsx
@@ -54,20 +54,7 @@ export function Head(): ReactElement {
         name="viewport"
         content="width=device-width, initial-scale=1.0, viewport-fit=cover"
       />
-      <style>{`
-        :root {
-          --nextra-primary-hue: ${lightHue}deg;
-          --nextra-primary-saturation: ${lightSaturation}%;
-          --nextra-navbar-height: 4rem;
-          --nextra-menu-height: 3.75rem;
-          --nextra-banner-height: 2.5rem;
-        }
-        
-        .dark {
-          --nextra-primary-hue: ${darkHue}deg;
-          --nextra-primary-saturation: ${darkSaturation}%;
-        }
-      `}</style>
+      <style>{`:root{--nextra-primary-hue:${lightHue}deg;--nextra-primary-saturation:${lightSaturation}%;--nextra-navbar-height:4rem;--nextra-menu-height:3.75rem;--nextra-banner-height:2.5rem;}.dark{--nextra-primary-hue:${darkHue}deg;--nextra-primary-saturation:${darkSaturation}%;}`}</style>
       {head}
     </NextHead>
   )

diff --git a/packages/nextra/src/server/compile.ts b/packages/nextra/src/server/compile.ts
@@ -215,6 +215,8 @@ export async function compileMdx(
       format,
       outputFormat,
       providerImportSource: 'nextra/mdx',
+      // Fix TypeError: _jsx is not a function for remote content
+      development: process.env.NODE_ENV === 'development',
       remarkPlugins: [
         ...(remarkPlugins || []),
         remarkMermaid, // should be before remarkRemoveImports because contains `import { Mermaid } from ...`