{"id":19360,"library":"babel-root-import","title":"babel-root-import","description":"Babel plugin to enable root-relative imports (e.g., import Foo from '@/foo') in JavaScript/TypeScript projects. Version 4.1.8 is the legacy package, renamed to babel-plugin-root-import (latest v6.6.0). This plugin transforms root-relative paths to relative paths at build time. Key differentiator: simple configuration (rootPathSuffix) and support for dynamic imports. Often confused with webpack aliases but works at Babel level. Low release cadence: last update 2019. Consider using babel-plugin-root-import instead, which is the maintained successor.","status":"renamed","version":"4.1.8","language":"javascript","source_language":"en","source_url":"https://github.com/entwicklerstube/babel-root-import","tags":["javascript"],"install":[{"cmd":"npm install babel-root-import","lang":"bash","label":"npm"},{"cmd":"yarn add babel-root-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-root-import","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Requires Babel to function as a plugin","package":"babel-core","optional":true}],"imports":[{"note":"Options must be passed as an array with the plugin name and options object. Missing options leads to default behavior (root = './'), which may not work as expected.","wrong":"module.exports = { plugins: ['babel-root-import'] }","symbol":"default (plugin)","correct":"module.exports = { plugins: [['babel-root-import', { rootPathSuffix: 'src' }]] }"},{"note":"In .babelrc JSON, the plugin and options must be an array in an array. Omitting options is common but may cause root resolution to fail.","wrong":"{ \"plugins\": [\"babel-root-import\"] }","symbol":"default (plugin) with .babelrc","correct":"{ \"plugins\": [[\"babel-root-import\", { \"rootPathSuffix\": \"src\" }]] }"},{"note":"Default root prefix is '@/'. Other prefixes like '~' are not supported without custom configuration (rootPathPrefix).","wrong":"import Foo from '/foo' or import Foo from '~/foo'","symbol":"Import syntax usage","correct":"import Foo from '@/foo'"}],"quickstart":{"code":"// Install: npm install --save-dev babel-root-import\n// Configure in .babelrc:\n{\n  \"plugins\": [\n    [\"babel-root-import\", {\n      \"rootPathSuffix\": \"src\",\n      \"rootPathPrefix\": \"@/\"\n    }]\n  ]\n}\n\n// Usage in src/app.js:\nimport User from '@/models/user';  // resolves to ./src/models/user\nconsole.log(User);","lang":"javascript","description":"Shows installation, .babelrc configuration with custom root suffix and prefix, and an example import resolving to a src-relative path."},"warnings":[{"fix":"Use babel-plugin-root-import instead. Requires uninstalling this package and installing the new one.","message":"Package is renamed to babel-plugin-root-import. babel-root-import will no longer receive updates.","severity":"deprecated","affected_versions":">=4.1.8"},{"fix":"Update prefix in code and configuration to '@/' or set a custom prefix.","message":"Root path prefix changed default from '~' in early versions to '@/' in version 5+.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Use array syntax: [\"babel-root-import\", { rootPathSuffix: \"src\" }]","message":"Options object must be wrapped in an array in the plugins list. Common mistake: passing object directly.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Set rootPathSuffix to your source directory (e.g., 'src') or adjust it appropriately.","message":"The plugin does not work without a rootPathSuffix; default is './' which may not resolve as expected.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure babel-root-import is installed and configured with rootPathSuffix and rootPathPrefix in .babelrc or babel.config.js.","cause":"Root import path not transformed correctly due to missing or misconfigured plugin options.","error":"Error: Cannot find module '@some/module'"},{"fix":"Add a corresponding alias in webpack config (resolve.alias) or use a different root import approach.","cause":"Webpack or other bundler cannot resolve the @ alias; the plugin only transforms to relative paths at Babel level, but the bundler may need its own alias.","error":"Module not found: Can't resolve '@/foo' in '/path/to/project'"},{"fix":"Ensure your code is transpiled with Babel before running, or use node with a require hook like @babel/register.","cause":"Using root import syntax (e.g., import from '@/foo') without Babel processing (e.g., running node directly).","error":"SyntaxError: Unexpected token /"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}