無法在 React 中聲明接口，Typescript，& Vite

Question

我有一個用 React，Typescript & Vite 創建的項目。 當我為一個組件聲明一個接口時，它給出了這個錯誤。 我在下面包含了我認為會導致問題的文件。 如果您認為任何其他文件導致此問題，請告訴我。

[plugin:vite:esbuild] Transform failed with 1 error:
C:/Users/Aqib/Desktop/React/New-Agrod-Frontend/src/components/ui/IconTextField.tsx:3:10: ERROR: Expected ";" but found "Props"

C:/Users/Aqib/Desktop/React/New-Agrod-Frontend/src/components/ui/IconTextField.tsx:4:10

Expected ";" but found "Props"
1  |  import RefreshRuntime from "/@react-refresh";let prevRefreshReg;let prevRefreshSig;if (import.meta.hot) {  if (!window.__vite_plugin_react_preamble_installed__) {    throw new Error(      "@vitejs/plugin-react can't detect preamble. Something is wrong. " +      "See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201"    );  }  prevRefreshReg = window.$RefreshReg$;  prevRefreshSig = window.$RefreshSig$;  window.$RefreshReg$ = (type, id) => {    RefreshRuntime.register(type, "C:/Users/Aqib/Desktop/React/New-Agrod-Frontend/src/components/ui/IconTextField.tsx" + " " + id)  };  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;}import { BaseTextFieldProps, Box, TextField } from '@mui/material';
2  |  import { FC, ReactNode } from 'react';
3  |  interface Props extends BaseTextFieldProps {
   |            ^
4  |    icon?: ReactNode | ReactNode[];
5  |  }

    at failureErrorWithLog (C:\Users\Aqib\Desktop\React\New-Agrod-Frontend\node_modules\esbuild\lib\main.js:1604:15)
    at C:\Users\Aqib\Desktop\React\New-Agrod-Frontend\node_modules\esbuild\lib\main.js:837:29
    at responseCallbacks.<computed> (C:\Users\Aqib\Desktop\React\New-Agrod-Frontend\node_modules\esbuild\lib\main.js:701:9)
    at handleIncomingPacket (C:\Users\Aqib\Desktop\React\New-Agrod-Frontend\node_modules\esbuild\lib\main.js:756:9)
    at Socket.readFromStdout (C:\Users\Aqib\Desktop\React\New-Agrod-Frontend\node_modules\esbuild\lib\main.js:677:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23

導致錯誤的代碼

import { BaseTextFieldProps, Box, TextField } from '@mui/material'
import { FC, ReactNode } from 'react'

interface Props extends BaseTextFieldProps {
  icon?: ReactNode | ReactNode[]
}

const IconTextField: FC<Props> = ({ icon, ...rest }) => {
  return (
    <Box sx={{ position: 'relative' }}>
      <TextField
        {...rest}
        variant='outlined'
        size='small'
        InputProps={{
          style: {
            backgroundColor: 'white',
            outline: 'none',
            borderRadius: 10,
          },
        }}
        fullWidth
      />
      <Box sx={{ position: 'absolute', top: 10, left: -30 }}>{icon}</Box>
    </Box>
  )
}

export default IconTextField

ts配置文件

{
  "compilerOptions": {
    "baseUrl": ".",
    "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-jsx",
    "paths": {
      "@Pages/*": ["./src/pages/*"],
      "@Layout/*": ["./src/layouts/*"],
      "@Assets/*": ["./src/assets/*"],
      "@Components/*": ["./src/components/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  esbuild: {
    loader: 'jsx',
  },
  root: './',
  build: {
    outDir: './build',
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
        '.ts': 'tsx',
      },
    },
  },
  plugins: [react(), tsconfigPaths()],
})

我試着搜索這個錯誤，但找不到任何東西。

Answer 1

如果你改變裝載機它應該工作

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
    esbuild: {
        loader: 'tsx',
    },
    root: './',
    build: {
        outDir: './build',
    },
    optimizeDeps: {
        esbuildOptions: {
            loader: {
                '.js': 'jsx',
                '.ts': 'tsx',
            },
        },
    },
    plugins: [react(), tsconfigPaths()],
});