Launch React apps faster with Rocket.new today
Why does Vite not support require by default?
Can I still use CommonJS packages in Vite?
How do I fix “uncaught referenceerror require” in my React app?
Is there a quick fix without touching code?
Facing the “vite require is not defined” error while migrating your React project? This guide explains why it happens, how to fix it with ES modules, adjust config files, and avoid repeated issues. Learn step-by-step solutions backed by developer community insights.
You’re starting a new React project with Vite, enjoying its fast builds and clean workflow—until the console throws: “vite require is not defined.”
This error often appears when migrating from create react app or using legacy code that relies on require(). The root cause is simple: Vite uses ES modules, while older libraries still depend on CommonJS.
In this blog, we’ll explain why the error happens, how to fix it step by step, and share practical solutions so you don’t face the same problem again.
The require is not defined message typically comes from trying to use CommonJS syntax in a Vite project. Unlike Webpack (used in React scripts), Vite is built on ES modules and doesn’t automatically polyfill CommonJS require. This mismatch creates compatibility issues when you import older libraries.
In many cases, you may also see uncaught referenceerror require messages in the console, which signals that the browser doesn’t know what require() means. Vite does not inject Node.js polyfills by default, so your JS file fails at runtime.
Developers usually report the same issue on community forums when:
React Scripts 5.0.1 to Vite.CommonJS.The same problem can also happen if your config file is missing a proper plugin setup. Many posts on Stack Overflow demonstrate how users attempted to patch without success, ultimately resorting to the only solution: switching syntax or updating dependencies.
Before applying fixes, acknowledge that you have read the project’s documentation carefully. Each fix depends on the context of your JS and CSS dependencies, so test after every step.
Most of the time, the solution is simple: rewrite require() with import.
Bad code (CommonJS):
1const reactDom = require("react-dom"); 2
Fixed code (ESM):
1import ReactDOM from "react-dom"; 2
This way, Vite understands your react dom usage. If you’re working with react router dom, update those imports as well.
If a dependency does not support ES modules, you may need to configure Vite to handle it. In your config file, use:
1import { defineConfig } from "vite"; 2 3export default defineConfig({ 4 optimizeDeps: { 5 include: ["legacy-package"], 6 } 7}); 8
The export default defineconfig call is what instructs Vite how to handle specific packages. Sometimes you may need to apply patch package updates when a library doesn’t expose ES modules.
Some libraries rely on Node features unavailable in the browser. If the same problem persists, you can install polyfill plugins or migrate to libraries that work natively in Vite. This avoids repeating the uncaught referenceerror require case.
If you migrated from create-react, old config values may still exist. Remove outdated scripts tied to React scripts and adapt everything for Vite. Check your file structure for leftover code that calls Node functions.
If you’re still facing the same problem, the GitHub community has shared practical fixes and insights. Check out the ongoing Vite discussion for real-world solutions from developers who solved the error.
When browsing Stack Overflow, you’ll notice several posts marked with bronze badges, silver badges, or even gold badges where users shared how they fixed the error. Many suggest rewriting imports, others recommend adjusting config, and some mention the patch package approach.
If you are signed in, you can leave comments, post your answer, or even save this answer by clicking the " copy link or the link to this answer button. If you’re not logged in, you can still post as a guest, sign up using Google, or sign up using Facebook to share your fix.
Some threads are months old but remain relevant today because the same issue occurs repeatedly with legacy dependencies. You’ll also notice the activity on this post stays high, as many still face the uncaught reference error problem.
At times, reading the question feed or clicking browse other questions tagged helps locate a better answer you’re looking for. When you finally post your answer, make sure it’s a solution others can apply. Don’t forget to acknowledge that you have read related docs before suggesting.
Let’s take a sample React component where the import fails:
1// old style 2const myComponent = require("./MyComponent.js"); 3 4// fixed style 5import MyComponent from "./MyComponent.js"; 6
This direct import resolves the error and works properly with Vite.
These resources include real-world discussions and link references where developers have already solved the error. Always check the details before applying someone else’s patch.
Take your React projects further with faster scaffolding and modern workflows. Try Rocket.new to build and ship apps without the setup headaches.
Migrating to Vite requires updating old habits. If you encounter the "vite require is not defined" issue, the key takeaway is to use ES module imports consistently. Make sure your config is updated, your file references are correct, and your document structure is modernized.
With these steps, you’ll avoid repeating the same problem and keep your React projects running smoothly.