Registry / serialization / babel-plugin-inline-import

babel-plugin-inline-import

library3.0.0jsnpmunverified

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.

serialization http-networking web-framework

npm install babel-plugin-inline-import

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-INLIN

babel-plugin-inline-import

serializationjavascriptv3.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import schema from './schema.graphql';

✗ const schema = require('./schema.graphql');

Plugin only works with ESM import syntax; require() is not transformed.

default

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

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

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

default

✓ import content from './file.raw';

✗ import './file.raw';

Side-effect imports (no variable binding) are not transformed.

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 // }

Debug

Known issues

gotchaBabel 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.

affects: >=3.0.0

gotchaOnly 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'

affects: >=3.0.0

breakingVersion 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.

affects: 2.x

Errors

Common errors & fixes

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

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: .graphql is not a valid extension for babel-plugin-inline-import

Plugin is not configured to handle the .graphql extension.

fix

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

SyntaxError: Unexpected identifier

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

fix

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

Upgrade

Version history

3.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

20 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Quadric/babel-plugin-inline-import ↗

packagehttps://www.npmjs.com/package/babel-plugin-inline-import ↗