From c74ae90a5f6a06baabce41fd80c81903f5dac9f6 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <en3m@ya.ru>
Date: Mon, 15 Jan 2024 02:30:30 +0100
Subject: [PATCH] [v3] Fix TypeError: _jsx is not a function for remote content
 on development environment (#2629)

* aa

* use const

* fix tests, minify css vars
---
 .changeset/old-bears-invent.md                    |  6 ++++++
 .../nextra-theme-docs/src/components/head.tsx     | 15 +--------------
 packages/nextra/src/server/compile.ts             |  2 ++
 3 files changed, 9 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/old-bears-invent.md

diff --git a/.changeset/old-bears-invent.md b/.changeset/old-bears-invent.md
new file mode 100644
index 0000000000..96f741e446
--- /dev/null
+++ 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
index 62affaed10..b691a04dc1 100644
--- 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
index 0c704fecaa..1ebf379301 100644
--- 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 ...`