cari

Rumah  >  Soal Jawab  >  teks badan

: Ringkasan tidak dapat menyelesaikan import '/src/main.tsx'

Saya mempunyai apl React skrip taip lama dan sekarang saya mahu memindahkannya daripada pek web ke vite, apabila saya membina apl menggunakan arahan ini ia menunjukkan ralat seperti ini: 

> 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.

Apakah yang perlu saya lakukan untuk menyelesaikan masalah ini? Saya mencari dari internet dan nampaknya tiada siapa yang menghadapi masalah yang sama. Ini ialah 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"
    }
})

Ini yang saya pesan dari 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>,
)

Ini ialah 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粉529581199305 hari yang lalu619

membalas semua(2)saya akan balas

  • P粉080643975

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

    Bagi saya ia adalah pakej yang saya pasang tetapi mendapat ralat. Masalahnya ialah saya terlupa bahawa saya mengalih keluar pakej daripada kebergantungan dalam package.json. Saya menyelesaikan masalah dengan menambahkannya. Anda juga boleh melakukan ini 

    npm uninstall package
    npm install package

    balas
    0
  • P粉042455250

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

    Serupa dengan soalan ini, fail lalai vite.config.ts adalah seperti berikut:

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

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

    Jika anda menggunakan npm run build 运行构建脚本，它会起作用，因为 index.html fail itu terletak dalam direktori peringkat akar projek anda. 

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

    Dengan menghantar fail seperti root: path.join(__dirname, 'src') 这样的 root 属性，您需要一个 index.html > 放置在 src di dalam direktori.

    Sekarang, memandangkan anda berhijrah daripada webpack, anda mungkin mempunyai

    fail di dalam direktori src dan anda cuba mengubah suai root dalam src 目录内有 index.html 文件，并且您尝试修改vite.config.ts 中的 root untuk mencari titik masuk yang betul . Walau bagaimanapun, fail vite index.html 文件链接到 main.tsx, seperti yang ditunjukkan di bawah 

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

    Apa yang anda perlu lakukan ialah menukar struktur fail supaya sama dengan apa yang vite berikan kepada anda secara lalai:

    Tukar fail vite.config.ts anda kepada: 

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

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

    Kemudian alihkan index.html fail ke direktori root .

    balas
    0
  • Batalbalas