使用 vite React 和 ts 启用 hmr 覆盖

Question

我有一个使用 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()永远不会显示overlay。

我做了托盘在 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

使用 React vite 和 jsx 的 hmr 覆盖示例：