{"id":19026,"library":"babel-plugin-auto-import","title":"babel-plugin-auto-import","description":"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.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/PavelDymkov/babel-plugin-auto-import","tags":["javascript","babel-plugin","import","module"],"install":[{"cmd":"npm install babel-plugin-auto-import","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-auto-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-auto-import","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The plugin MUST be specified as a tuple with options array, not a string.","wrong":"{\"plugins\": [\"auto-import\", {...}]}","symbol":"auto-import (babel plugin)","correct":"// In .babelrc: {\"plugins\": [[\"auto-import\", {...}]]}"},{"note":"Order of members and default does not matter; both can coexist.","wrong":"{\"declarations\": [{\"default\": \"React\", \"path\": \"react\", \"members\": [\"Component\"]}]}","symbol":"React auto-import","correct":"{\"declarations\": [{\"default\": \"React\", \"members\": [\"Component\"], \"path\": \"react\"}]}"},{"note":"Use 'anonymous' array for side-effect only imports (no default or named binding).","wrong":"{\"declarations\": [{\"default\": \"fetch\", \"path\": \"whatwg-fetch\"}]}","symbol":"Side-effect import","correct":"{\"declarations\": [{\"anonymous\": [\"fetch\"], \"path\": \"whatwg-fetch\"}]}"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [[\n    \"auto-import\", {\n      \"declarations\": [\n        { \"default\": \"React\", \"path\": \"react\" },\n        { \"default\": \"Component\", \"path\": \"react\" }\n      ]\n    }\n  ]]\n}\n\n// input.js\nReact.createElement('div', null, []);\n\n// output.js\nimport React from \"react\";\nReact.createElement('div', null, []);","lang":"javascript","description":"Demonstrates basic auto-import for React and Component using .babelrc configuration."},"warnings":[{"fix":"Use [[\"auto-import\", { ... }]] instead of [\"auto-import\", { ... }].","message":"Plugin options must be wrapped in an array tuple in .babelrc/programmatic config; omitting the outer array causes 'Invalid Plugin' error.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use {\"anonymous\": [\"fetch\"], \"path\": \"whatwg-fetch\"}.","message":"Anonymous imports for side-effect modules require the 'anonymous' array, not 'default' or 'members'.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Verify nameReplacePattern matches file extension exactly (e.g., '\\\\.js$').","message":"Filename-based path generation with [name] uses the current file's basename. Mismatched patterns cause unresolved imports.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev babel-plugin-auto-import` and check spelling.","cause":"Plugin is not installed or name is mistyped in config.","error":"Unknown plugin \"auto-import\" specified in \"plugins\""},{"fix":"Change to [[\"auto-import\", { ... }]].","cause":"Plugin options are not wrapped in a tuple array.","error":"Error: .plugins[0][0] must be a string, function, or object"},{"fix":"Add {\"default\": \"React\", \"path\": \"react\"} to declarations.","cause":"Auto-import declaration missing or incorrect path.","error":"ReferenceError: React is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}