：汇总无法解析导入“/src/main.tsx”-PHP中文网问答

我有一个遗留的 typescript React 应用程序，现在我想将其从 webpack 迁移到 vite，当我使用此命令构建应用程序时，显示如下错误：

> 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"
    }
})

这是我从通过命令 npm create vite@latest my-vue-app -- --template react-ts:

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

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  
    ddddd
  ,
)

这是 index.html:

全部回复(2)

P粉0806439752024-01-29 16:27:01 2楼

对我来说，这是我安装的一个软件包，但出现了错误。问题是我忘记了我从 package.json 中的依赖项中删除了该包。我通过添加它解决了这个问题。你也可以这样做

npm uninstall package

npm install package

赞 +0

添加回复

P粉0424552502024-01-29 09:51:06 1楼

类似于这个问题，默认的vite.config.ts文件如下：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

如果您使用 npm run build 运行构建脚本，它会起作用，因为 index.html 文件位于项目的根级目录中。 p>

rootDir/
  |- src/
      |- <src dir contents>
  |- index.html
  |- vite.config.ts

通过传递像 root: path.join(__dirname, 'src') 这样的 root 属性，您需要一个 index.html > 放置在 src 目录内部的文件。

现在，由于您是从 webpack 迁移的，因此您可能在 src 目录内有 index.html 文件，并且您尝试修改vite.config.ts 中的 root 来查找正确的入口点。但是，vite index.html 文件链接到 main.tsx 文件，如下所示

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

您需要做的就是将文件结构更改为与 vite 默认为您提供的文件结构相同：

将您的 vite.config.ts 文件更改为：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build:{
    outDir: "build"
  }
})

然后将index.html文件移动到根目录。