diff --git a/.changeset/great-hotels-breathe.md b/.changeset/great-hotels-breathe.md
new file mode 100644
index 000000000..19b6ae685
--- /dev/null
+++ b/.changeset/great-hotels-breathe.md
@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/markdown-remark': patch
+---
+
+Fixed shiki to work with `{ "type": "module" }`
diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index e64c55fb0..625511774 100644
--- a/packages/astro/components/Code.astro
+++ b/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);
diff --git a/packages/markdown/remark/src/remark-shiki.ts b/packages/markdown/remark/src/remark-shiki.ts
index 4226c6db6..e759a0cad 100644
--- a/packages/markdown/remark/src/remark-shiki.ts
+++ b/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);