我正在使用React + Vite创建一个设计系统项目。这个项目将是其他项目中使用的GIT子模块。
将子模块导入到其他项目并使用创建的组件时，应用程序返回以下错误：

ERROR in ./packages/MightZord-DS/src/components/Switch/index.tsx 9:0

Module parse failed: The keyword 'interface' is reserved (9:0)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| import { FieldRow } from "../Field/styles";
| 
> interface SwitchFieldProps {
|     id: string;
|     label: string;

MightZord-DS项目文件：
**文件：**src/components/Switch/index。土耳其电信公司

import React from "react";
import { SwitchRoot, SwitchThumb, LabelSwitch } from "./styles";
import { FieldRow } from "../Field/styles";

interface SwitchFieldProps {
    id: string;
    label: string;
    defaultValue?: boolean;
    updateValueField?: (value: boolean) => void;
}
const Switch = ({ id, label, defaultValue, updateValueField }: SwitchFieldProps) => {

    return (
        <FieldRow style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <LabelSwitch htmlFor={id}>
                {label}
            </LabelSwitch>
            <SwitchRoot
                className="SwitchRoot"
                id={id}
                checked={defaultValue}
                onCheckedChange={updateValueField}
            >
                <SwitchThumb className="SwitchThumb" />
            </SwitchRoot>
        </FieldRow>
    )
}

export default Switch

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

包.json

{
  "name": "@magazord/mightzord-ds",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@radix-ui/react-switch": "^1.0.2",
    "polished": "^4.2.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "styled-components": "^5.3.9"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@types/styled-components": "^5.1.26",
    "@vitejs/plugin-react": "^3.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }
}

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

这些组件将在索引中导出。ts文件，该文件位于项目的根目录。

index.ts

import Switch from './src/components/Switch'

export { Switch };

在另一个项目中，我使用子模块策略并导入我从MightZord-DS项目导出的组件。
我试着去做他们在其他问题上说的每一件事，但没有成功。
Parsing error: The keyword 'interface' is reserved
Webpack doesn't bundle TypeScript
The keyword 'interface' is reserved when using lerna
Module parse failed: The keyword 'interface' is reserved (5:0) File was processed with these loaders
Module parse failed: The keyword 'interface' is reserved using turbo repo Next.js 13