babel-plugin-react-require

4.0.3 verified Sat Apr 25 auth: no javascript maintenance

A Babel plugin (v4.0.3) that automatically adds an ES2015 import for React to files containing JSX tags. It targets stateless functional components that do not explicitly import React, saving boilerplate. Works with Babel 7+ (v4) and Babel 6 (v3). Released less frequently, with no updates in several years; similar functionality is now partially covered by @babel/preset-react with the 'runtime: automatic' option.

Common errors

error Error: Cannot find module 'babel-plugin-react-require' ↓

cause Plugin not installed as a devDependency.

fix

npm install babel-plugin-react-require --save-dev

error SyntaxError: ... Support for the experimental syntax 'jsx' isn't currently enabled ↓

cause Missing JSX preset/plugin; this plugin only adds the import, not JSX transformation.

fix

Add @babel/preset-react to your Babel config: { "presets": ["@babel/preset-react"] }

Warnings

deprecated With @babel/preset-react's automatic runtime (React 17+), React does not need to be in scope for JSX, making this plugin unnecessary for new projects. ↓

fix Use @babel/preset-react with { "runtime": "automatic" } instead.

gotcha Plugin must be placed before transform-es2015-modules-commonjs in Babel 6 to ensure ES import syntax is used. ↓

fix Order plugins: ["react-require", "transform-es2015-modules-commonjs"]

gotcha Only adds the import for files containing JSX. If you use React API like useState, useEffect, or createContext, you still need to import them explicitly. ↓

fix Manually import named exports: import { useState } from 'react';

Install

npm install babel-plugin-react-require

yarn add babel-plugin-react-require

pnpm add babel-plugin-react-require

Imports

default export of plugin

wrong

// Not applicable; plugin is used via Babel config, not imported in code.

correct

// in .babelrc: { "plugins": ["react-require"] }

Quickstart

Configures Babel to auto-import React in files with JSX.

// .babelrc
{
  "plugins": ["react-require"]
}

// component.js (no explicit React import)
export default function Component() {
  return <div />;
}

// After transpilation, React is imported automatically:
// import React from 'react';