dynamic import に変更

Author: na-trium-144

app/terminal/typescript/runtime.tsx

@@ -1,19 +1,13 @@
 "use client";
 
-import ts, { CompilerOptions } from "typescript";
-import {
-  createSystem,
-  createVirtualTypeScriptEnvironment,
-  knownLibFilesForCompilerOptions,
-  VirtualTypeScriptEnvironment,
-} from "@typescript/vfs";
+import { type CompilerOptions } from "typescript";
+import { type VirtualTypeScriptEnvironment } from "@typescript/vfs";
 import {
   createContext,
   ReactNode,
   useCallback,
   useContext,
   useEffect,
-  useRef,
   useState,
 } from "react";
 import { useEmbedContext } from "../embedContext";
@@ -31,6 +25,12 @@ export function TypeScriptProvider({ children }: { children: ReactNode }) {
     if (tsEnv === null) {
       const abortController = new AbortController();
       (async () => {
+        const ts = (await import("typescript")).default;
+        const {
+          createSystem,
+          createVirtualTypeScriptEnvironment,
+          knownLibFilesForCompilerOptions,
+        } = await import("@typescript/vfs");
         const system = createSystem(new Map());
         const libFiles = knownLibFilesForCompilerOptions(compilerOptions, ts);
         const libFileContents = await Promise.all(
@@ -117,10 +117,17 @@ export function useTypeScript(jsEval: RuntimeContext): RuntimeContext {
       }
 
       const emitOutput = tsEnv.languageService.getEmitOutput(filenames[0]);
-      files = await writeFile(Object.fromEntries(emitOutput.outputFiles.map((of) => [of.name, of.text])));
+      files = await writeFile(
+        Object.fromEntries(
+          emitOutput.outputFiles.map((of) => [of.name, of.text])
+        )
+      );
 
-      console.log(emitOutput)
-      const jsOutputs = jsEval.runFiles([emitOutput.outputFiles[0].name], files);
+      console.log(emitOutput);
+      const jsOutputs = jsEval.runFiles(
+        [emitOutput.outputFiles[0].name],
+        files
+      );
 
       return outputs.concat(await jsOutputs);
     },