[v3] Fix TypeError: _jsx is not a function for remote content on development environment (#2629)

* aa

* use const

* fix tests, minify css vars

Author: Dimitri POSTOLOV

.changeset/old-bears-invent.md

@@ -0,0 +1,6 @@
+---
+'nextra': patch
+---
+
+Fix TypeError: \_jsx is not a function for remote content on development
+environment

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>
   )

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 ...`