{"id":19082,"library":"babel-plugin-inline-import","title":"babel-plugin-inline-import","description":"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.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/Quadric/babel-plugin-inline-import","tags":["javascript","babel-plugin","graphql","raw","extension","wrap","import","inline"],"install":[{"cmd":"npm install babel-plugin-inline-import","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-inline-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-inline-import","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Plugin only works with ESM import syntax; require() is not transformed.","wrong":"const schema = require('./schema.graphql');","symbol":"default","correct":"import schema from './schema.graphql';"},{"note":"Named imports are not supported; only default imports are transformed.","wrong":"import { graphqlSchema } from '../../types/schema.graphql';","symbol":"default","correct":"import graphqlSchema from '../../types/schema.graphql';"},{"note":"Side-effect imports (no variable binding) are not transformed.","wrong":"import './file.raw';","symbol":"default","correct":"import content from './file.raw';"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\n    [\"babel-plugin-inline-import\", {\n      \"extensions\": [\".graphql\", \".sql\"]\n    }]\n  ]\n}\n\n// schema.graphql\ntype Query {\n  hello: String\n}\n\n// index.js\nimport schema from './schema.graphql';\nconsole.log(typeof schema); // \"string\"\nconsole.log(schema);\n// type Query {\n//   hello: String\n// }","lang":"javascript","description":"Configures the plugin to process .graphql and .sql files, then imports a .graphql file as a string."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Always use default import syntax: import x from 'file.graphql'","message":"Only default imports are transformed. Named imports and side-effect imports are left unchanged, potentially causing runtime errors.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Remove any 'extend' option from plugin configuration; wrap content manually if needed.","message":"Version 3.0.0 removed support for the 'extend' configuration option. Previously allowed customizing how content is wrapped.","severity":"breaking","affected_versions":"2.x"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add babel-inline-import-loader or ensure the file is processed by Babel before webpack: use babel-inline-import-loader in webpack config.","cause":"Webpack tries to process the imported file but lacks a rule for the extension.","error":"Module parse failed: Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type."},{"fix":"Add the extension to the plugin options: { plugins: [[\"babel-plugin-inline-import\", { extensions: [\".graphql\"] }]] }","cause":"Plugin is not configured to handle the .graphql extension.","error":"Error: .graphql is not a valid extension for babel-plugin-inline-import"},{"fix":"Replace require() with ES6 import syntax: import content from './file.graphql'","cause":"Using require() instead of import to load the file.","error":"SyntaxError: Unexpected identifier"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}