我有一个使用 vite 和 ts 设置的 React 项目。 如果没有 ts,我确实会遇到覆盖错误,就像我们过去在基本 React 项目中遇到错误一样。
import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
const path = require('path');
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: [
{ find: '@', replacement: path.resolve(__dirname, '/src') },
{
find: '@components',
replacement: path.resolve(__dirname, '/src/components'),
},
{ find: '@pages', replacement: path.resolve(__dirname, '/src/pages') },
],
},
plugins: [reactRefresh()],
});
看起来reactRefresh()永远不会显示覆盖层。
我做了托盘在 vite.config.ts 中设置它
hmr: { overlay: true },
甚至
server: {
hmr: { overlay: true },
},
11:16:09 AM [vite] Internal server error: Transform failed with 1 error:
/mnt/mydata/src/App.tsx:2:38: error: Unterminated string literal
Plugin: vite:esbuild
File: /mnt/mydata/src/App.tsx
Unterminated string literal
1 | import React, { useState } from 'react';
2 | import Navbar from '@components/Navbar
| ^
3 | import './App.css';
4 | const App = () => {
at failureErrorWithLog (/mnt/mydata/node_modules/esbuild/lib/main.js:1493:15)
at /mnt/mydata/node_modules/esbuild/lib/main.js:1282:29
at /mnt/mydata/node_modules/esbuild/lib/main.js:629:9
at handleIncomingPacket (/mnt/mydata/node_modules/esbuild/lib/main.js:726:9)
at Socket.readFromStdout (/mnt/mydata/node_modules/esbuild/lib/main.js:596:7)
at Socket.emit (node:events:390:28)
at addChunk (node:internal/streams/readable:315:12)
at readableAddChunk (node:internal/streams/readable:289:9)
at Socket.Readable.push (node:internal/streams/readable:228:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:199:23)
11:16:11 AM [vite] page reload src/App.tsx
错误消息似乎很清楚地说明了问题:您的
App.tsx
文件中有一个未终止的字符串文字。在提供的代码片段中,您有一个名为 Navbar
的组件的导入语句,该语句缺少结束引号:
import Navbar from '@components/Navbar
要解决此问题,只需关闭字符串即可:
import Navbar from '@components/Navbar';
此外,关于未显示叠加层,您可能需要检查
@vitejs/plugin-react-refresh
是否与您正在使用的 Vite 版本兼容,或者是否有推荐用于错误叠加层的较新插件。如果您已经在使用最新版本,则在 vite.config.ts
设置中启用叠加后,您的 hmr
看起来很好。确保您没有任何其他可能与之冲突的配置。