Need help with babel-plugin-inline-import?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

237 Stars 30 Forks MIT License 144 Commits 19 Opened issues


inline the raw content of import statements

Services available


Need anything else?

Contributors list

Babel Inline Import Build Status

Babel plugin to add the opportunity to use

with raw/literal content
It is good e.g. for importing
files into your code.


Before (without Babel-Inline-Import): ```javascript // server.js

// bad syntax highlighting, no syntax checking const typeDefinitions =

type Query {
  testString: String
schema {
  query: Query

graphQLServer({ schema: [typeDefinitions], ... }); ```

Now (with Babel-Inline-Import):

// /some/schema.graphql
type Query {
  testString: String
schema {
  query: Query
// server.js
import schema from '/some/schema.graphql';

graphQLServer({ schema: [schema], ... });

Note: both cases are equivalent and will result in similar code after Babel transpile them. Check How it works section for details.


npm install babel-plugin-inline-import --save-dev


Add a

file and write:
  "plugins": [
or pass the plugin with the plugins-flag on CLI
babel-node myfile.js --plugins babel-plugin-inline-import

By default, Babel-Inline-Import is compatible with the following file extensions:

  • .raw
  • .text
  • .graphql


If you want to enable different file extensions, you can define them in your

  "plugins": [
    ["babel-plugin-inline-import", {
      "extensions": [

How it works

It inserts the content of the imported file directly into the importing file, assigning it to a variable with the same identifier of the import statement, thus replacing the import statement and the file path by its resulting raw content (no parsing occurs).


Babel does not track dependency between imported and importing files after the transformation is made. Therefore, you need to change the importing file in order to see your changes in the imported file spread. To overcome this:

  • If you are using
    , you can disable babel cache (
  • If you are using webpack with
    , you can use babel-inline-import-loader.
  • An alternative library for webpack is raw-loader. Advantage = detects changes to imported file w/o additional config or losing babel's cache. Disadvantage: maintain 2 separate configs. E.g. 1) one w/
    for webpack, and 2) another one for babel using
    . E.g. if you use a create-react-app / CRA based React app, you may have 1) for
    yarn start
    / webpack and 2) for
    yarn test
    / babel. For CRA, craco and craco-raw-loader may help.

Also make sure that your task runner is watching for changes in the imported file as well. You can see it working here.


If you like this project just give it a star :) I like stars.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.