Registry / devops / babel-plugin-auto-import

babel-plugin-auto-import

library1.1.0jsnpmunverified

A Babel plugin that automatically converts global variable references into import statements at build time. The current stable version is 1.1.0. It has a low release cadence with no recent updates. It differs from similar plugins (like babel-plugin-import) by supporting anonymous imports for side-effect modules, dynamic path generation based on filename, and flexible declaration syntax for default, named, and mixed imports. It is widely used in Create React App setups via react-app-rewired.

devops

npm install babel-plugin-auto-import

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-AUTO-

babel-plugin-auto-import

devopsjavascriptv1.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

auto-import (babel plugin)

✓ // In .babelrc: {"plugins": [["auto-import", {...}]]}

✗ {"plugins": ["auto-import", {...}]}

The plugin MUST be specified as a tuple with options array, not a string.

React auto-import

✓ {"declarations": [{"default": "React", "members": ["Component"], "path": "react"}]}

✗ {"declarations": [{"default": "React", "path": "react", "members": ["Component"]}]}

Order of members and default does not matter; both can coexist.

Side-effect import

✓ {"declarations": [{"anonymous": ["fetch"], "path": "whatwg-fetch"}]}

✗ {"declarations": [{"default": "fetch", "path": "whatwg-fetch"}]}

Use 'anonymous' array for side-effect only imports (no default or named binding).

Demonstrates basic auto-import for React and Component using .babelrc configuration.

// .babelrc { "plugins": [[ "auto-import", { "declarations": [ { "default": "React", "path": "react" }, { "default": "Component", "path": "react" } ] } ]] } // input.js React.createElement('div', null, []); // output.js import React from "react"; React.createElement('div', null, []);

Debug

Known issues

gotchaPlugin options must be wrapped in an array tuple in .babelrc/programmatic config; omitting the outer array causes 'Invalid Plugin' error.

fix

Use [["auto-import", { ... }]] instead of ["auto-import", { ... }].

affects: >=1.0.0

gotchaAnonymous imports for side-effect modules require the 'anonymous' array, not 'default' or 'members'.

fix

Use {"anonymous": ["fetch"], "path": "whatwg-fetch"}.

affects: >=1.0.0

gotchaFilename-based path generation with [name] uses the current file's basename. Mismatched patterns cause unresolved imports.

fix

Verify nameReplacePattern matches file extension exactly (e.g., '\\.js$').

affects: >=1.0.0

Errors

Common errors & fixes

Unknown plugin "auto-import" specified in "plugins"

Plugin is not installed or name is mistyped in config.

fix

Run `npm install --save-dev babel-plugin-auto-import` and check spelling.

Error: .plugins[0][0] must be a string, function, or object

Plugin options are not wrapped in a tuple array.

fix

Change to [["auto-import", { ... }]].

ReferenceError: React is not defined

Auto-import declaration missing or incorrect path.

fix

Add {"default": "React", "path": "react"} to declarations.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/PavelDymkov/babel-plugin-auto-import ↗

packagehttps://www.npmjs.com/package/babel-plugin-auto-import ↗