fix: dynamic imports for react web components

BearToCode · Aug 9, 2024 · f70ef26 · f70ef26
1 parent 2c9b880
commit f70ef26
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git 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
@@ -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;