: Le cumul ne peut pas résoudre l'importation '/src/main.tsx'-Questions et réponses sur le réseau chinois PHP

J'ai une ancienne application React dactylographiée et maintenant je souhaite la migrer du webpack vers vite, lorsque je crée l'application à l'aide de cette commande, une erreur comme celle-ci s'affiche :

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

Que dois-je faire pour résoudre ce problème ? J'ai effectué une recherche sur Internet et il semble que personne ne soit confronté à un problème similaire. C'est 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"
    }
})

Voici ce que j'ai commandé chez 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>,
)

C'est 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>

répondre à tous(2)

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

Pour moi, c'était un package que j'avais installé mais qui avait une erreur. Le problème est que j'ai oublié que j'ai supprimé le package des dépendances dans package.json. J'ai résolu le problème en l'ajoutant. Vous pouvez le faire aussi

npm uninstall package

npm install package

Comme +0

Ajouter une réponse

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

Semblable à cette question, le vite.config.tsfichier par défaut est le suivant :

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

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

Si vous utilisez npm run build 运行构建脚本，它会起作用，因为 index.html, le fichier se trouve dans le répertoire racine de votre projet. p>

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

En transmettant des fichiers comme root: path.join(__dirname, 'src') 这样的 root 属性，您需要一个 index.html > 放置在 src dans les répertoires .

Maintenant, puisque vous migrez depuis webpack, vous avez probablement

fichiers dans le répertoire src et vous essayez de modifier la racine dans src 目录内有 index.html 文件，并且您尝试修改vite.config.ts 中的 root pour trouver le bon point d'entrée. Cependant, le fichier vite index.html 文件链接到 main.tsx, comme indiqué ci-dessous

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

Tout ce que vous avez à faire est de modifier la structure des fichiers pour qu'elle soit la même que celle que vite vous donne par défaut :

Changez votre vite.config.ts fichier par :

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

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

Déplacez ensuite les fichiers index.html vers le répertoire racine .