React TS项目从Webpack迁移到Vite时构建报错的解决咨询

我有一个遗留的TypeScript React项目，正在从Webpack迁移到Vite。执行构建命令tsc && vite build时，出现了Rollup无法解析/src/main.tsx的错误，具体日志如下：

> tsc && vite build

vite v4.3.5 building for production...
✓ 2 modules transformed.
✓ built in 32ms
[vite]: Rollup failed to resolve import "/src/main.tsx" from "/Users/John/source/reddwarf/frontend/snap-web/src/index.html".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "/src/main.tsx" from "/Users/John/source/reddwarf/frontend/snap-web/src/index.html".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteWarn (file:///Users/John/source/reddwarf/frontend/snap-web/node_modules/.pnpm/vite@4.3.5_@types+node@16.18.23/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:46561:23)
    at onwarn (file:///Users/John/source/reddwarf/frontend/snap-web/node_modules/@vitejs/plugin-react/dist/index.mjs:237:9)
    at onRollupWarning (file:///Users/John/source/reddwarf/frontend/snap-web/node_modules/.pnpm/vite@4.3.5_@types+node@16.18.23/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:46582:9)
    at onwarn (file:///Users/John/source/reddwarf/frontend/snap-web/node_modules/.pnpm/vite@4.3.5_@types+node@16.18.23/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:46332:13)
    at Object.onwarn (file:///Users/John/source/reddwarf/frontend/snap-web/node_modules/.pnpm/rollup@3.21.5/node_modules/rollup/dist/es/shared/node-entry.js:25305:13)
    at ModuleLoader.handleInvalidResolvedId (file:///Users/John/source/reddwarf/frontend/snap-web/node_modules/.pnpm/rollup@3.21.5/node_modules/rollup/dist/es/shared/node-entry.js:23940:26)
    at file:///Users/John/source/reddwarf/frontend/snap-web/node_modules/.pnpm/rollup@3.21.5/node_modules/rollup/dist/es/shared/node-entry.js:23900:26
 ELIFECYCLE  Command failed with exit code 1.

我的项目配置文件和核心代码如下：

vite.config.ts #

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
    root: path.join(__dirname, 'src'),
    plugins: [react()],
    build:{
        outDir: "build"
    }
})

main.tsx #

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <div>ddddd</div>
  </React.StrictMode>,
)

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <link rel="manifest" href="/manifest.json" />
    <title>title</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

请问该如何解决这个构建报错？

问题根源在于Vite根目录配置与脚本引用路径不匹配：

你在vite.config.ts中把项目根目录root设置为了src文件夹，这意味着Vite会以src作为解析路径的起点。但你在index.html里引用脚本时写的是/src/main.tsx，这个路径相对于src根目录来说，实际指向的是src/src/main.tsx——而你的项目里并没有这个文件，所以Rollup无法解析。

具体修复步骤： #

1. 修改index.html中的脚本引用路径，将：

   <script type="module" src="/src/main.tsx"></script>
   

   改为以下两种写法之一：

   • 相对路径：

     <script type="module" src="./main.tsx"></script>
     

   • 绝对路径（相对于Vite根目录src）：

     <script type="module" src="/main.tsx"></script>
     

2. 检查静态资源路径：由于你把Vite根目录设为了src，原来项目根目录下的public文件夹需要移到src目录内，否则favicon.ico、manifest.json等静态资源会无法被正确加载。

做完以上修改后，重新执行tsc && vite build即可正常构建。

内容的提问来源于stack exchange，提问作者spark