Maison > Questions et réponses > le corps du texte
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粉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
P粉0424552502024-01-29 09:51:06
Semblable à cette question, le vite.config.ts
fichier 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 .
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 .