babel-inline-import-loader

1.0.1 verified Fri May 01 auth: no javascript maintenance

A webpack loader that integrates with babel-plugin-inline-import to ensure file imports via the plugin trigger webpack rebuilds on content changes. Version 1.0.1 is current, with no recent updates since 2020. Releases are infrequent, focusing on bug fixes. Unlike alternative approaches that require manual watchers, this loader leverages webpack's addDependency API for automatic rebuilds. Requires babel-plugin-inline-import@3.0.0+ and webpack. Primarily used with babel-loader in JavaScript projects.

Common errors

error Module not found: Error: Can't resolve 'babel-inline-import-loader' ↓

cause Loader is not installed or not in node_modules.

fix

Run 'npm install babel-inline-import-loader --save-dev'

error Error: The loader 'babel-inline-import-loader' is not a function ↓

cause Incorrect import (e.g., using ESM import instead of require) or path issue.

fix

Use require in webpack config: const loader = require('babel-inline-import-loader');

error babel-plugin-inline-import: Unknown plugin "inline-import" specified in ... ↓

cause babel-plugin-inline-import not installed or not specified correctly.

fix

Install babel-plugin-inline-import@>=3.0.0 and add to babel plugins.

Warnings

gotcha Must disable babel-loader cacheDirectory (set to false) to ensure rebuilds on inline-import file changes. ↓

fix Set 'cacheDirectory: false' in babel-loader options.

gotcha Requires babel-plugin-inline-import@3.0.0 or later for comment generation support. ↓

fix Upgrade babel-plugin-inline-import to version 3.0.0 or later.

gotcha Loader order matters: babel-inline-import-loader must be placed before babel-loader in the use array. ↓

fix Ensure use array order: ['babel-inline-import-loader', { loader: 'babel-loader', options: {...} }]

gotcha The loader only processes files with the pattern '/* babel-plugin-inline-import '<path>' */' comments; custom plugin versions may not include the comment. ↓

fix Confirm babel-plugin-inline-import generates the expected comment.

Install

npm install babel-inline-import-loader

yarn add babel-inline-import-loader

pnpm add babel-inline-import-loader

Imports

default
wrong
```
import loader from 'babel-inline-import-loader'
```
correct
```
module.exports = require('babel-inline-import-loader')
```
This package is a webpack loader, not a JavaScript module. Use require() in webpack config. No default export.

Quickstart

Demonstrates basic webpack configuration to enable file imports via babel-plugin-inline-import with automatic rebuilds.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-inline-import-loader',
          {
            loader: 'babel-loader',
            options: {
              plugins: [
                ['inline-import', {
                  extensions: ['.txt']
                }]
              ],
              cacheDirectory: false
            }
          }
        ]
      }
    ]
  }
};
// Note: Ensure babel-plugin-inline-import@>=3.0.0 is installed.