babel-plugin-bundled-import-meta

0.3.2 verified Sat Apr 25 auth: no javascript

Babel plugin (v0.3.2, last updated 2020) that rewrites import.meta.url expressions to static file paths or runtime-resolved URLs for use in bundled JavaScript output. It allows developers to define mappings between local source directories and server URLs, and supports multiple import styles (amd, cjs, esm, iife, umd, system). Unlike alternatives like @rollup/plugin-replace or webpack's DefinePlugin, this plugin is specifically designed for bundlers like Rollup or custom Babel pipelines that need to preserve import.meta semantics in bundles. Requires @babel/core as a peer dependency. Active but low maintenance cadence.

Common errors

error Error: Cannot find module 'babel-plugin-bundled-import-meta' ↓

cause Plugin not installed or incorrectly referenced in Babel config.

fix

Run 'npm install babel-plugin-bundled-import-meta --save-dev' and use string 'bundled-import-meta' (without 'babel-plugin-' prefix).

error TypeError: Cannot read property 'url' of undefined ↓

cause import.meta is undefined in the runtime environment (e.g., Node.js without proper support).

fix

Set 'importStyle' to a non-'esm' value like 'cjs' to avoid relying on import.meta at runtime.

error SyntaxError: Unexpected token . ↓

cause Babel is not configured with the plugin, or the plugin is not applied before other transforms that parse import.meta.

fix

Ensure the plugin is listed in 'plugins' array, and check Babel version >= 7.7.0.

error The plugin bundled-import-meta threw: Error: Could not resolve import.meta for file ... ↓

cause Source file is outside any mapping and bundleDir, so plugin cannot determine a replacement.

fix

Add a mapping for the file's directory or set bundleDir to cover it.

Warnings

gotcha The plugin does not support dynamic import.meta properties other than 'url'. Using import.meta.env or import.meta.hot will not be transformed and may cause runtime errors. ↓

fix Only use import.meta.url in your code; for other properties, use a different solution.

gotcha When importStyle is set to 'esm', the generated code uses import.meta.url at runtime, which may fail in environments that don't support import.meta (e.g., older browsers or Node without --experimental-modules). ↓

fix Choose a different importStyle (e.g., 'cjs' or 'amd') that resolves the bundle URL via a different global or mechanism.

deprecated The plugin relies on Greenkeeper badge and Travis CI, indicating maintenance may have stalled. No updates since 2020. ↓

fix Consider migrating to @rollup/plugin-replace or manual import.meta transformation for active support.

gotcha If no mapping matches the source file and bundleDir is not set correctly, the plugin throws an exception during build. ↓

fix Ensure all source files with import.meta.url are covered by mappings or reside under bundleDir.

gotcha Relative URLs in mappings are resolved at runtime relative to the bundle URL; if the bundle URL is unknown, this can lead to incorrect absolute paths. ↓

fix Use absolute URLs in mappings when possible, or ensure bundle URL is known and static.

Install

npm install babel-plugin-bundled-import-meta

yarn add babel-plugin-bundled-import-meta

pnpm add babel-plugin-bundled-import-meta

Imports

default plugin

wrong

const plugin = require('babel-plugin-bundled-import-meta').default;

correct

module.exports = ['bundled-import-meta', { mappings: { 'src': '/assets' } }];

The plugin is a CommonJS default export. Use string reference in Babel config.

ESM config usage

wrong

import { bundledImportMeta } from 'babel-plugin-bundled-import-meta';

correct

import bundledImportMeta from 'babel-plugin-bundled-import-meta'; export default { plugins: [[bundledImportMeta, { bundleDir: 'dist' }]] };

Named export does not exist; must use default import for programmatic use.

Babel presets/plugins array
wrong
```
plugins: ['babel-plugin-bundled-import-meta']
```
correct
```
plugins: [['bundled-import-meta', { importStyle: 'esm' }]]
```
String name should omit 'babel-plugin-' prefix; options object is optional but recommended.

Quickstart

Configures the plugin with mappings and bundleDir, showing how import.meta.url is rewritten for bundled output.

// babel.config.js
module.exports = {
  plugins: [
    ['bundled-import-meta', {
      mappings: {
        'src/components': '/assets',
        'node_modules': '/vendor'
      },
      bundleDir: 'dist',
      importStyle: 'esm'
    }]
  ]
};

// Before transformation:
const url = import.meta.url;

// After transformation (esm style):
const url = new URL('/assets/components/my-file.js', import.meta.url).href;
// If inside a mapped directory; otherwise falls back to bundleDir relative resolution.