我有一个使用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()],
})
我试着搜索这个错误,但什么也找不到。
1条答案
按热度按时间z6psavjg1#
如果您更换加载器,它应该工作