suchen

Heim  >  Fragen und Antworten  >  Hauptteil

: Zusammenfassung kann Import „/src/main.tsx“ nicht auflösen

Ich habe eine alte TypeScript-React-App und möchte sie jetzt von Webpack zu Vite migrieren. Wenn ich die App mit diesem Befehl erstelle, wird ein Fehler wie dieser angezeigt:

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

Was soll ich tun, um dieses Problem zu lösen? Ich habe im Internet gesucht und es scheint, dass niemand mit einem ähnlichen Problem konfrontiert ist. Das ist 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"
    }
})

Das habe ich bei npm create vite@latest my-vue-app -- --template react-ts bestellt:

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>,
)

Das ist 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 Tage vor798

Antworte allen(2)Ich werde antworten

  • P粉080643975

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

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

    npm uninstall package
    npm install package

    Antwort
    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文件移动到根目录

    Antwort
    0
  • StornierenAntwort