I am trying to migrate from CRA to Vite.
- I cloned the project from GitHub
- I removed 'react-scripts' from both 'scripts' and 'dependencies' section from package.json
- I ran this command:
yarn add vite @vitejs/plugin-react-refresh vite-plugin-svgr - I added vite.config.js to the root directory.
vite.config.js
import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react";
import svgrPlugin from "vite-plugin-svgr";
export default defineConfig({
build: {
outDir: "build",
},
plugins: [
reactRefresh(),
svgrPlugin({
svgrOptions: {
icon: true,
},
}),
],
});
- I installed all the dependencies using the command:
yarn - I moved the index.html to the root directory.
- I changed the index.html file. Now, It looks like this:
<!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.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<!-- bootstrap css -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<!-- bootstrap js -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<script type="module" src="/src/main.jsx"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<script type="module" src="/src/index.jsx"></script>
</div>
</body>
</html>
- I renamed the index.jsx to main.jsx
- I made sure all the functional component has .jsx extension to their file name
- Finally i renamed the .env secret to
VITE_STRIPEfrom REACT_APP_STRIPE
Then I ran this command: yarn start
But it shows:
vite start Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.
VITE v4.4.9 ready in 401 ms
Local: http://localhost:5173/ Network: use --host to expose press h to show help
In http://localhost:5173/: This localhost page can’t be found
You can see the code structure in GitHub at the commit: vite integration failed in vite-integration branch.
I would like to know what I did wrong and How can I successfully migrate from CRA to vite?
I tried
yarn cache cleanyarn vite dev. returns:
yarn run v1.22.19
$ C:\Apu\personal_project\E-Mart-Client-vite\E-Mart-Client\node_modules\.bin\vite dev
failed to load config from C:\Apu\personal_project\E-Mart-Client-vite\E-Mart-Client\vite.config.js
error when starting dev server:
Error: Cannot find module '@vitejs/plugin-react'
yarn add @vitejs/plugin-react-refreshagain.yarn vite devreturns the same as number 2.The issue persists.