节点fs文件不存在

我有以下代码来读取我的Node fs项目中的文件。

 const files: FileSystemTree = {
      "Component.tsx": {
        file: {
          contents: fs.readFileSync(
            `../../apps/components/${name.toLowerCase()}/${name.charAt(0).toUpperCase()}${name.slice(1)}.tsx`
          )
        }
      }
    };

这是整个类别的一部分:

import {WebContainer, FileSystemTree} from "@webcontainer/api";
import fs from "fs";

export default class Container {
  private mContainer!: WebContainer;

  constructor() {
    this.CreateContainer();
    this.ScaffoldViteApp();
    this.StartDevServer();
  }

  private CreateContainer = async () => {
    try {
      this.mContainer = await WebContainer.boot();
    } catch (err) {
      throw new Error(JSON.stringify(err));
    }

    return this.mContainer;
  }; 

  private ScaffoldViteApp = async () => {
    try {
      this.mContainer.spawn("npm", [
        "create",
        "vite",
        "container-example -- --template react-swc-ts"
      ]);
    } catch (err) {
      throw new Error(JSON.stringify(err));
    }

    return this.mContainer;
  };

  private StartDevServer = async () => {
    try {
      this.mContainer.spawn("npm", ["run", "dev"]);
    } catch (err) {
      throw new Error(JSON.stringify(err));
    }

    return this.mContainer;
  };

  public SetComponent(name: string) {
    const files: FileSystemTree = {
      "Component.tsx": {
        file: {
          contents: fs.readFileSync(
            `../../apps/components/${name.toLowerCase()}/${name.charAt(0).toUpperCase()}${name.slice(1)}.tsx`
          )
        }
      }
    };

    console.log(fs.readFileSync(
        `../../apps/components/${name.toLowerCase()}/${name.charAt(0).toUpperCase()}${name.slice(1)}`
      ))

    try {
      this.mContainer.fs.mkdir("components");
    } catch (err) {
      throw new Error(JSON.stringify(err));
    }

    try {
      this.mContainer.mount(files, {mountPoint: "components"});
    } catch (err) {
      throw new Error(JSON.stringify(err));
    }

    return this.mContainer;
  }

  public GetIframe() {
    return this.mContainer.on("server-ready", (port, url) => {
      return url;
    });
  }

  public WriteComponent(name: string, content: string) {
    const files: FileSystemTree = {
      "Component.tsx": {
        file: {
          contents: content
        }
      }
    };

    try {
      this.mContainer.mount(files, {mountPoint: "components"});
    } catch (err) {
      throw new Error(JSON.stringify(err));
    }

    return this.mContainer;
  }
}

当我使用vitest运行时: Container.SetComponent() 我得到一个错误:

Error: ENOENT: no such file or directory, open '../../apps/components/example/Example'

然而,在命令单击路径时,它确实存在。我用一个试过同样的东西 .tsx 最终没有结果。我还尝试使用ts节点和tsx运行该文件,得到了相同的结果。以下是我的项目结构:

.
├── README.md
├── apps
│   ├── components
│   │   ├── example
│   │   │   ├── Example.tsx
│   │   │   ├── stories
│   │   │   │   └── Example.stories.tsx
│   │   │   └── tests
│   │   │       └── example.spec.tsx
│   │   └── project.json
│   ├── docs
│   │   ├── README.md
│   │   ├── astro.config.mjs
│   │   ├── node_modules
│   │   │   ├── @astrojs
│   │   │   │   ├── check -> ../../../../node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@astrojs/check
│   │   │   │   └── starlight -> ../../../../node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected][email protected]_/node_modules/@astrojs/starlight
│   │   │   ├── astro -> ../../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/astro
│   │   │   ├── sharp -> ../../../node_modules/.pnpm/[email protected]/node_modules/sharp
│   │   │   └── typescript -> ../../../node_modules/.pnpm/[email protected]/node_modules/typescript
│   │   ├── package.json
│   │   ├── project.json
│   │   ├── public
│   │   │   └── favicon.svg
│   │   └── src
│   │       ├── assets
│   │       │   └── houston.webp
│   │       ├── content
│   │       │   ├── config.ts
│   │       │   └── docs
│   │       │       ├── components
│   │       │       │   └── example.mdx
│   │       │       ├── guides
│   │       │       │   └── example.md
│   │       │       └── index.mdx
│   │       └── env.d.ts
│   └── storybook
│       ├── node_modules
│       ├── package.json
│       ├── project.json
│       ├── tsconfig.json
│       └── tsconfig.storybook.json
├── docs
│   ├── assets
│   │   ├── highlight.css
│   │   ├── icons.js
│   │   ├── icons.svg
│   │   ├── main.js
│   │   ├── navigation.js
│   │   ├── search.js
│   │   └── style.css
│   ├── functions
│   │   └── default.html
│   ├── index.html
│   ├── modules.html
│   └── types
│       └── Props.html
├── eslint.config.js
├── index.css
├── nx.json
├── package.json
├── packages
│   ├── docs-sandbox
│   │   ├── createContainer.ts
│   │   ├── project.json
│   │   └── tests
│   │       └── createContainer.spec.ts
│   ├── etech-ui-dev
│   │   └── project.json
│   └── etech-ui-utils
│       └── project.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── postcss.config.cjs
├── reactDocgen.ts
├── tailwind.config.js
├── tests
│   └── setup.ts
├── tsconfig.astro.json
├── tsconfig.json
├── tsconfig.node.json
├── tsconfig.react.json
├── types
│   └── eslint-plugin-react.d.ts
└── vite.config.ts