babel-plugin-inline-import

3.0.0 verified Sat Apr 25 auth: no javascript

Babel plugin that allows importing raw file contents as strings during transpilation. Version 3.0.0 supports importing files with extensions like .raw, .text, .graphql, with configurable extension mapping. It replaces import statements with the file's literal content, enabling use cases like embedding GraphQL schemas or SQL queries without separate file reading. Differentiates from webpack raw-loader by operating at the Babel level, working with babel-node and babel-register. Caveat: Babel does not track dependencies for imported files, requiring cache disabling or watcher configuration.

Common errors

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause Webpack tries to process the imported file but lacks a rule for the extension.

fix

Add babel-inline-import-loader or ensure the file is processed by Babel before webpack: use babel-inline-import-loader in webpack config.

error Error: .graphql is not a valid extension for babel-plugin-inline-import ↓

cause Plugin is not configured to handle the .graphql extension.

fix

Add the extension to the plugin options: { plugins: [["babel-plugin-inline-import", { extensions: [".graphql"] }]] }

error SyntaxError: Unexpected identifier ↓

cause Using require() instead of import to load the file.

fix

Replace require() with ES6 import syntax: import content from './file.graphql'

Warnings

gotcha Babel does not track dependency between imported and importing files after transformation. Changing the imported file will not trigger recompilation unless the importing file is also changed. ↓

fix Disable Babel cache with BABEL_DISABLE_CACHE=1 when using babel-node or babel-register. For webpack, use babel-inline-import-loader to force recompilation.

gotcha Only default imports are transformed. Named imports and side-effect imports are left unchanged, potentially causing runtime errors. ↓

fix Always use default import syntax: import x from 'file.graphql'

breaking Version 3.0.0 removed support for the 'extend' configuration option. Previously allowed customizing how content is wrapped. ↓

fix Remove any 'extend' option from plugin configuration; wrap content manually if needed.

Install

npm install babel-plugin-inline-import

yarn add babel-plugin-inline-import

pnpm add babel-plugin-inline-import

Imports

default
wrong
```
const schema = require('./schema.graphql');
```
correct
```
import schema from './schema.graphql';
```
Plugin only works with ESM import syntax; require() is not transformed.

default

wrong

import { graphqlSchema } from '../../types/schema.graphql';

correct

import graphqlSchema from '../../types/schema.graphql';

Named imports are not supported; only default imports are transformed.

default
wrong
```
import './file.raw';
```
correct
```
import content from './file.raw';
```
Side-effect imports (no variable binding) are not transformed.

Quickstart

Configures the plugin to process .graphql and .sql files, then imports a .graphql file as a string.

// .babelrc
{
  "plugins": [
    ["babel-plugin-inline-import", {
      "extensions": [".graphql", ".sql"]
    }]
  ]
}

// schema.graphql
type Query {
  hello: String
}

// index.js
import schema from './schema.graphql';
console.log(typeof schema); // "string"
console.log(schema);
// type Query {
//   hello: String
// }