diff --git a/components/ui/code-editor.tsx b/components/ui/code-editor.tsx
index 8545d40..69a3e30 100644
--- a/components/ui/code-editor.tsx
+++ b/components/ui/code-editor.tsx
@@ -33,7 +33,8 @@ const CodeEditor = (props: Props) => {
 
     monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
       target: monaco.languages.typescript.ScriptTarget.Latest,
-      allowNonTsExtensions: true,
+      allowNonTsExtensions: false,
+      allowImportingTsExtensions: true,
       moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
       module: monaco.languages.typescript.ModuleKind.CommonJS,
       noEmit: true,
diff --git a/pages/project/@slug/components/file-viewer.tsx b/pages/project/@slug/components/file-viewer.tsx
index 64759ba..3caf1cd 100644
--- a/pages/project/@slug/components/file-viewer.tsx
+++ b/pages/project/@slug/components/file-viewer.tsx
@@ -40,15 +40,13 @@ const FileViewer = ({ id }: Props) => {
     return <p>File not found.</p>;
   }
 
-  const { filename } = data;
-
   if (!data.isFile) {
     return (
       <Suspense fallback={<LoadingLayout />}>
         <CodeEditor
-          filename={filename}
+          filename={data.filename}
           path={data.path}
-          value={data?.content || ""}
+          value={data.content || ""}
           formatOnSave
           onChange={(val) => {
             updateFileContent.mutate({