fix

src/App.tsx

@@ -231,10 +231,7 @@ export function App() {
     if (info.name) {
       const { env_files } = generateEnv({ [info.name]: info });
       Object.entries(env_files).forEach(([path, content]) => {
-        container.container!.fs.writeFile(
-          `user/${path}`,
-          content.file.contents,
-        );
+        container.writeFile(`user/${path}`, content.file.contents);
       });
     }
   };

src/components/DeployModal.tsx

@@ -365,11 +365,11 @@ export function DeployModal({
             type: "saveFile",
             payload: { path: `${name}.d.ts`, contents: ts },
           });
-          await container.container!.fs.mkdir(`user/${bindingDir}`, {
+          await container.mkdir(`user/${bindingDir}`, {
             recursive: true,
           });
-          await container.container!.fs.writeFile(`user/${name}.js`, js);
-          await container.container!.fs.writeFile(`user/${name}.d.ts`, ts);
+          await container.writeFile(`user/${name}.js`, js);
+          await container.writeFile(`user/${name}.d.ts`, ts);
           logger.log(`Generated frontend bindings at ${name}.js`);
         }
         onDeploy(info);

src/components/Editor.tsx

@@ -153,7 +153,7 @@ export function Editor({
     });
     if (fileExtension !== "mo") {
       // TODO: will trap if path doesn't exist
-      await container.container!.fs.writeFile(`user/${fileName}`, newValue);
+      await container.writeFile(`user/${fileName}`, newValue);
     } else {
       await worker.Moc({ type: "save", file: fileName, content: newValue });
       await checkFileAddMarkers();

src/components/FrontendDeployModal.tsx

@@ -130,7 +130,7 @@ export function FrontendDeployModal({
         const principal = identity.getPrincipal();
         const args = IDL.encode([IDL.Principal], [principal]);
         await backend.callForward(info!, "authorize", args);
-        await container.container!.fs.writeFile(
+        await container.writeFile(
           "utils/identity.json",
           JSON.stringify(identity.toJSON()),
         );

src/webcontainer.ts

@@ -57,6 +57,27 @@ export class Container {
     };
     await this.container!.mount(files);
   }
+  async writeFile(
+    path: string,
+    contents: string | Uint8Array,
+    options?:
+      | string
+      | {
+          encoding?: string;
+        },
+  ) {
+    await this.init();
+    await this.container!.fs.writeFile(path, contents, options);
+  }
+  async mkdir(
+    path: string,
+    options?: {
+      recursive?: boolean;
+    },
+  ) {
+    await this.init();
+    await this.container!.fs.mkdir(path, options);
+  }
   private async spawn(cmd: string, args: string[], options?: SpawnOptions) {
     const new_options = {
       ...options,