recherche

Maison  >  Questions et réponses  >  le corps du texte

 : Le cumul ne peut pas résoudre l'importation '/src/main.tsx'

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>


P粉529581199P粉529581199306 Il y a quelques jours621

répondre à tous(2)je répondrai

  • P粉080643975

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

    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

    répondre
    0
  • P粉042455250

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

    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.

    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 .

    répondre
    0
  • Annulerrépondre