{"id":19247,"library":"babel-plugin-webpack-loaders","title":"babel-plugin-webpack-loaders","description":"A Babel 6 plugin that allows using webpack loaders during Babel transpilation, enabling server-side use of CSS modules, image imports, and other webpack loader features without a full webpack build. Version 0.9.0 (last updated 2016) is the current stable release. Maintained primarily for legacy projects; the author strongly recommends migrating to modern alternatives like Jest with moduleNameMapper. Key differentiator: enables isomorphic/universal apps to run on the server without a separate build step. However, it's effectively deprecated in favor of Jest and babel-jest for testing, and Next.js or other frameworks for server-side rendering.","status":"deprecated","version":"0.9.0","language":"javascript","source_language":"en","source_url":"https://github.com/istarkov/babel-plugin-webpack-loaders","tags":["javascript","babel","webpack","loader","css-modules","css-loader"],"install":[{"cmd":"npm install babel-plugin-webpack-loaders","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-webpack-loaders","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-webpack-loaders","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency; plugin uses webpack internally to resolve and apply loaders.","package":"webpack","optional":false}],"imports":[{"note":"This plugin is not imported in source code; it is installed as a Babel plugin via configuration.","symbol":"default plugin","correct":"Use in .babelrc as plugin name 'babel-plugin-webpack-loaders' or via JavaScript: require('babel-plugin-webpack-loaders')"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\n    [\"babel-plugin-webpack-loaders\", {\n      \"config\": \"./webpack.config.js\",\n      \"verbose\": false\n    }]\n  ]\n}\n\n// webpack.config.js (example)\nmodule.exports = {\n  output: { target: 'node' },\n  module: {\n    loaders: [\n      {\n        test: /\\.css$/,\n        loaders: ['style-loader', 'css-loader?modules']\n      }\n    ]\n  }\n};\n\n// Run babel with the plugin, e.g., babel-node example.js\n// example.js\nimport css from './example.css';\nconsole.log('CSS modules:', css);\n// Output: { main: 'example__main--hash' }","lang":"javascript","description":"Configure .babelrc with plugin pointing to a webpack config, then import CSS files in Node.js using Babel compilation to get CSS module class names."},"warnings":[{"fix":"Migrate to Jest and mock CSS/asset imports using identity-obj-proxy or similar.","message":"Plugin is effectively deprecated; author recommends using Jest with moduleNameMapper instead.","severity":"deprecated","affected_versions":">=0.9.0"},{"fix":"Downgrade webpack to version 2.x or use an alternative like babel-plugin-transform-imports.","message":"Requires webpack >=1.12.9 and <3.0.0; incompatible with webpack 3+ and Babel 7+.","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"Only apply this plugin in Node.js/Babel environments, not in webpack's own configuration.","message":"Do not use this plugin in frontend webpack configurations; it is intended only for backend compilation.","severity":"gotcha","affected_versions":">=0.9.0"},{"fix":"If using unsupported loaders, consider alternatives like webpack-isomorphic-tools or custom solutions.","message":"Plugin alpha quality; tested only with specific loaders (file-loader, url-loader, css-loader, style-loader, sass-loader, postcss-loader). Other loaders may not work.","severity":"gotcha","affected_versions":">=0.9.0"},{"fix":"Set BABEL_DISABLE_CACHE=1 in your environment before running Babel.","message":"BABEL_DISABLE_CACHE=1 environment variable often required to avoid stale cached results.","severity":"gotcha","affected_versions":">=0.9.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install via npm: npm install babel-plugin-webpack-loaders --save-dev","cause":"Plugin not installed or not in node_modules.","error":"Error: Plugin babel-plugin-webpack-loaders could not be found"},{"fix":"Install the missing loaders, e.g., npm install style-loader css-loader --save-dev","cause":"Webpack loaders referenced in the webpack config are not installed.","error":"Error: Module not found: Error: Cannot resolve module 'style-loader' in ..."},{"fix":"Ensure webpack version is exactly ^1.12.9 || ^2.0.0 (i.e., <3.0.0).","cause":"Incompatible webpack version; plugin expects webpack 1.x or 2.x.","error":"TypeError: The 'compilation' argument must be an instance of Compilation"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}