React bundles sometimes leave Node-style `module` references inside browser chunks, so the runtime throws `ReferenceError: module is not defined`. Make sure every file and dependency emits ES module syntax or that your bundler rewrites CommonJS APIs before shipping the code.
Encountering `ReferenceError: module is not defined` in a React build means the JavaScript that landed in the browser still tries to access the CommonJS `module` object, but browsers have no global by that name. This typically happens when an ES module bundle accidentally keeps `module.exports` / `exports` references (or even a stray `require`), so the script crashes before React can render anything. The root of the problem is mixing module systems: a file authored with CommonJS syntax or a dependency that targets Node is being consumed by an ES module pipeline without a transform. When bundlers like Webpack, Vite, or the Next.js compiler assume they're generating `type="module"` output, they stop polyfilling the `module` helper, so the browser immediately complains. Before blaming the framework, double-check your imports/exports and the bundler configuration so every asset either ships as a proper ES module or has been rewritten into the target format. A consistent module graph keeps the browser from stumbling over a missing `module` global.
Convert files to ESM imports/exports before bundling. Avoid CommonJS helpers like require / module.exports inside client code:
// ❌ CommonJS that trips the browser
const utils = require('./utils');
module.exports = { format };
// ✅ ES module syntax that bundlers emit for the browser
import utils from './utils';
export function format(value) {
return utils.format(value);
}ES modules keep the graph consistent and prevent the bundler from leaving stray references to the Node-only module runtime.
Inspect your Webpack/Vite/Rollup config so every dependency passes through a CommonJS transformer. For Webpack, include babel-loader (or swc-loader) and close gaps with resolve.fullySpecified:
module.exports = {
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/(?!your-cjs-dependency)/,
use: 'babel-loader'
}
]
},
resolve: {
fullySpecified: false
}
};Babel or the appropriate plugin rewrites module.exports so the browser bundle never sees the Node global.
If you absolutely need to run the same module on the server and client, wrap Node-specific usage behind a guard:
if (typeof module !== 'undefined') {
module.exports = { renderApp };
}
export function renderApp() {
// client-safe logic
}This pattern stops the browser from executing the conditional branch that references module, while still exporting values for Node environments.
Check the dependency's package.json fields. When a package ships both CommonJS and ESM code, prefer the module or exports field so bundlers pull the browser-ready build. Use package aliasing in Webpack or Vite to force the ESM entry if the default leads to the CJS build that tries to reference module.
Browsers never define a module global, so bundlers normally emulate it while wrapping traditional scripts. When the output is marked as type="module", bundlers stop providing the helper because the runtime already satisfies the spec, which is why letting a Node-targeted chunk leak through instantly throws. Audit package.json type, main, and module fields and lean on the exports map to make sure every dependency exposes the format your build expects.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite