{"id":19145,"library":"babel-plugin-relative-path-import","title":"babel-plugin-relative-path-import","description":"babel-plugin-relative-path-import (stable v2.0.1, Babel 7+) enables root-based import paths (e.g., '@actions/UserAction') as an alternative to deeply nested relative paths. Supports multiple custom prefix/suffix mappings. Differentiates from Webpack resolve aliases by working at the Babel transform level, allowing compatibility with tools that don't resolve Webpack aliases. Primarily used with Node.js/React projects. Last updated 2019, see more recent alternatives like babel-plugin-root-import.","status":"maintenance","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/dayitv89/babel-plugin-relative-path-import","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-relative-path-import","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-relative-path-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-relative-path-import","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Used as a Babel plugin in .babelrc or babel.config.js, not imported directly in source code.","wrong":"import plugin from 'babel-plugin-relative-path-import';","symbol":"default","correct":"module.exports = { plugins: [['babel-plugin-relative-path-import', { paths: [{ rootPathPrefix: '@', rootPathSuffix: 'src' }] }]] }"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\n    [\n      \"babel-plugin-relative-path-import\",\n      {\n        \"paths\": [\n          {\n            \"rootPathPrefix\": \"@\",\n            \"rootPathSuffix\": \"src\"\n          }\n        ]\n      }\n    ]\n  ]\n}\n\n// src/app.js\nimport UserAction from '@actions/UserAction'; // resolves to src/actions/UserAction.js","lang":"javascript","description":"Configures Babel to resolve '@'-prefixed imports relative to a 'src' directory."},"warnings":[{"fix":"If on Babel 6, install version 1.0.5 or lower.","message":"Version 2.0.0+ is only compatible with Babel 7; Babel 6 users must use v1.x.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Update config to use array format as shown in README.","message":"The default rootPathPrefix changed from '@' in v1 to still '@' but the paths option now expects an array of objects instead of a single object.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Ensure you use Babel for both build and runtime, or use a runtime resolver like module-alias.","message":"This plugin does not affect runtime resolution; paths are only transformed at build time. If using Node.js runtime without Babel, imports will fail.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Migrate to the new array-based paths configuration.","message":"The plugin no longer supports the old single-object configuration schema from v1.","severity":"breaking","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use the plugin only as a string in Babel configuration, not as an imported module.","cause":"Attempting to import or use the plugin incorrectly in a JavaScript file that is not a Babel config.","error":"Error: Plugin/preset files are not allowed to export objects, only functions."},{"fix":"Verify rootPathSuffix is correct and that Babel plugin runs before Webpack resolves modules.","cause":"Path prefix not mapped correctly or plugin not applied during Webpack build.","error":"Module not found: Can't resolve '@/components/Button'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}