Fixed shiki import to work with "type": "module" (#2628)

* Fixed shiki import to work with "type": "module"

* Changeset

* Separated types import

* Add "* as" to type import

.changeset/great-hotels-breathe.md

@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/markdown-remark': patch
+---
+
+Fixed shiki to work with `{ "type": "module" }`

packages/astro/components/Code.astro

@@ -1,5 +1,6 @@
 ---
-import shiki from 'shiki';
+import type * as shiki from 'shiki';
+import { getHighlighter } from 'shiki';
 
 export interface Props {
 	/** The code to highlight. Required. */
@@ -49,10 +50,10 @@ function repairShikiTheme(html: string): string {
 	return html;
 }
 
-const highlighter = await shiki.getHighlighter({ 
+const highlighter = await getHighlighter({
 	theme,
 	// Load custom lang if passed an object, otherwise load the default
-	langs: typeof lang !== 'string' ? [lang] : undefined
+	langs: typeof lang !== 'string' ? [lang] : undefined,
 });
 const _html = highlighter.codeToHtml(code, { lang: typeof lang === 'string' ? lang : lang.id });
 const html = repairShikiTheme(_html);

packages/markdown/remark/src/remark-shiki.ts

@@ -1,4 +1,5 @@
-import shiki from 'shiki';
+import type * as shiki from 'shiki';
+import { getHighlighter } from 'shiki';
 import { visit } from 'unist-util-visit';
 
 export interface ShikiConfig {
@@ -30,7 +31,7 @@ export interface ShikiConfig {
 }
 
 const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => {
-	const highlighter = await shiki.getHighlighter({ theme });
+	const highlighter = await getHighlighter({ theme });
 
 	for (const lang of langs) {
 		await highlighter.loadLanguage(lang);