无法在React、Typescript和Vite中声明接口

siotufzp  于 2023-01-27  发布在  TypeScript
关注(0)|答案(1)|浏览(226)

我有一个使用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

tsconfig.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()],
})

我试着搜索这个错误,但什么也找不到。

z6psavjg

z6psavjg1#

如果您更换加载器,它应该工作

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()],
});

相关问题