Quick Fix: If you’re migrating from webpack, you might have the index.html inside the src directory. Move index.html to the root directory and set root property in vite.config.ts to root: path.join(__dirname, 'src').
The Problem:
While migrating a legacy TypeScript React app from Webpack to Vite, the build process is failing with the error: ‘[vite]: Rollup failed to resolve import "/src/main.tsx"’. Despite searching online, no similar issue has been found.
The Solutions:
Solution:
In Vite, your component file extensions should be ‘.tsx’. Currently, your main component file is named ‘main.tsx’, but it’s being imported with the extension ‘.html’ in your ‘index.html’ file. To fix the issue, update the import path in ‘index.html’ to match the correct file extension.
It’s important to use the correct file extensions in Vite because it relies on these extensions to identify and process different types of files. By using the ‘.tsx’ extension for your component files, Vite can correctly handle TypeScript syntax and perform necessary transformations during the build process.
Q&A
How do I fix the error: Rollup failed to resolve import "/src/main.tsx" from "/Users/John/source/reddwarf/frontend/snap-web/src/index.html" with vite ?
—
If you run the build script with npm run build, it works because the index.html file is at the root-level directory of the project. Change your vite.config.js file to this: plugins: [react()], and then move the index.html file to the root directory.
What can I do to solve this error: Vite: Rollup failed to resolve import "/src/main.tsx" from "/Users/John/source/reddwarf/frontend/snap-web/src/index.html" ?
—
Change your file extension under the component folder. In Vite your component file extension should be .tsx
Video Explanation:
The following video, titled "How to fix 'Module not found: Can't resolve 'http' in ...' error with FCL ...", provides additional insights and in-depth exploration related to the topics discussed in this post.
Basically, just change 'react-scripts' to 4.0.2 in your package.json and run `npm install` again 😀 Follow me on Twitter: ...
