From f70ef26cf073daa520f35d137e1a4cd4bdba09dc Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Fri, 9 Aug 2024 13:27:13 +0200
Subject: [PATCH] fix: dynamic imports for react web components

---
 packages/adapter-react/src/lib/MisMerge2.tsx | 6 +++++-
 packages/adapter-react/src/lib/MisMerge3.tsx | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/adapter-react/src/lib/MisMerge2.tsx b/packages/adapter-react/src/lib/MisMerge2.tsx
index acfa627..b5ef2a0 100644
--- a/packages/adapter-react/src/lib/MisMerge2.tsx
+++ b/packages/adapter-react/src/lib/MisMerge2.tsx
@@ -1,4 +1,3 @@
-import '@mismerge/core/web';
 import type { EditorColors, Highlighter, LineDiffAlgorithm } from '@mismerge/core';
 import { useEffect, useRef } from 'react';
 
@@ -41,6 +40,11 @@ export function MisMerge2({
 }) {
 	const ref = useRef<JSX.IntrinsicElements['mis-merge2']>(null);
 
+	useEffect(() => {
+		// @ts-expect-error No definitions provided for web components
+		import('@mismerge/core/web');
+	}, []);
+
 	useEffect(() => {
 		if (ref.current) {
 			ref.current.highlight = highlight;
diff --git a/packages/adapter-react/src/lib/MisMerge3.tsx b/packages/adapter-react/src/lib/MisMerge3.tsx
index 8a39ab3..0a5806e 100644
--- a/packages/adapter-react/src/lib/MisMerge3.tsx
+++ b/packages/adapter-react/src/lib/MisMerge3.tsx
@@ -1,4 +1,3 @@
-import '@mismerge/core/web';
 import type { EditorColors, Highlighter, LineDiffAlgorithm } from '@mismerge/core';
 import { useEffect, useRef } from 'react';
 
@@ -49,6 +48,11 @@ export function MisMerge3({
 }) {
 	const ref = useRef<JSX.IntrinsicElements['mis-merge2']>(null);
 
+	useEffect(() => {
+		// @ts-expect-error No definitions provided for web components
+		import('@mismerge/core/web');
+	}, []);
+
 	useEffect(() => {
 		if (ref.current) {
 			ref.current.highlight = highlight;