fix: dynamic imports for react web components

Author: BearToCode

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;

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;