搜尋

首頁  >  問答  >  主體

:匯總無法解析導入“/src/main.tsx”

我有一個遺留的 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(
  <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" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.googl e.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <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>


#
P粉529581199P粉529581199387 天前799

全部回覆(2)我來回復

  • P粉080643975

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

    對我來說,這是我安裝的軟體包,但出現了錯誤。問題是我忘記了我從 package.json 中的依賴項中刪除了該套件。我通過添加它解決了這個問題。你也可以這樣做

    npm uninstall package
    npm install package

    回覆
    0
  • P粉042455250

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

    類似於這個問題,預設的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 檔案位於專案的根級目錄中。

    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檔案移到根目錄

    回覆
    0
  • 取消回覆