fix: rfc changes

custom.d.ts

+declare module 'molart';

src/components/FunctionalArea/Modal/Modal.component.tsx

@@ -3,11 +3,16 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { modalSelector } from '@/redux/modal/modal.selector';
 import { closeModal } from '@/redux/modal/modal.slice';
 import { Icon } from '@/shared/Icon';
+import dynamic from 'next/dynamic';
 import { twMerge } from 'tailwind-merge';
+import { LoginModal } from './LoginModal';
 import { MODAL_ROLE } from './Modal.constants';
 import { OverviewImagesModal } from './OverviewImagesModal';
-import { MolArtModal } from './MolArtModal/MolArtModal.component';
-import { LoginModal } from './LoginModal';
+
+const MolArtModal = dynamic(
+  () => import('./MolArtModal/MolArtModal.component').then(mod => mod.MolArtModal),
+  { ssr: false },
+);
 
 export const Modal = (): React.ReactNode => {
   const dispatch = useAppDispatch();

src/components/FunctionalArea/Modal/MolArtModal/MolArtModal.component.tsx

-import * as React from 'react';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { currentSelectedBioEntityIdSelector } from '@/redux/modal/modal.selector';
+import * as MolArt from 'molart';
+import * as React from 'react';
 import { useEffect } from 'react';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-declare function require(name: string): any;
+const containerId = 'molart-container';
 
 export const MolArtModal: React.FC = () => {
   const uniprot = useAppSelector(currentSelectedBioEntityIdSelector);
-  const MolArt = require('MolArt');
-
-  // useEffect(() => {
-  //   const script = document.createElement('script');
-
-  //   script.src = '/molart.js';
-  //   script.async = true;
-
-  //   document.body.appendChild(script);
-
-  //   return () => {
-  //     document.body.removeChild(script);
-  //   };
-  // }, []);
 
   useEffect(() => {
     const molart = new MolArt({
       uniprotId: uniprot,
-      containerId: 'molArtContainer',
+      containerId,
     });
 
-    // eslint-disable-next-line no-console
-    // console.log(molart.destroy(), 'testow molart');
-
     return () => {
-      molart.destroy();
+      try {
+        molart.destroy();
+      } catch (e) {
+        // molart.destroy errors are ignored as there's a conflict between react rerenders and molart initialization
+        // eslint-disable-next-line no-console
+        console.error(e);
+      }
     };
-  }, [uniprot, MolArt]);
+  }, [uniprot]);
 
   return (
-    <div className="flex h-full w-full items-center justify-center bg-white" id="molArtContainer" />
+    <div className="flex h-full w-full items-center justify-center bg-white" id={containerId} />
   );
 };