{"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,"search_vec":"'/foo':17 '2019':74 '4.1.8':22 'alias':63 'babel':2,5,30,67,78 'babel-plugin-root-import':29,77 'babel-root-import':1 'build':47 'cadenc':71 'configur':52 'confus':60 'consid':75 'differenti':50 'dynam':57 'e.g':13 'enabl':8 'foo':15 'import':4,12,14,33,58,81 'instead':82 'javascript':88 'javascript/typescript':19 'key':49 'last':72 'latest':34 'legaci':25 'level':68 'low':69 'maintain':86 'often':59 'packag':26 'path':42,45 'plugin':6,31,37,79 'project':20 'relat':11,41,44 'releas':70 'renam':27 'root':3,10,32,40,80 'root-rel':9,39 'rootpathsuffix':53 'simpl':51 'successor':87 'support':55 'time':48 'transform':38 'updat':73 'use':76 'v6.6.0':35 'version':21 'webpack':62 'work':65","created_at":"2026-04-25T11:17:23.717139+00:00","updated_at":"2026-04-25T11:17:23.717139+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/entwicklerstube/babel-root-import","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/babel-root-import","openapi_spec":null,"status_page":null,"smithery":null,"categories":[],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}