{"id":20168,"library":"jsx-loader","title":"jsx-loader","description":"A Webpack loader for transforming JSX syntax into JavaScript. Version 0.13.2 is the last release (circa 2015), unmaintained for years. Superseded by babel-loader and TypeScript compilers. Supports harmony (ES6) and Flow type stripping via query parameters. No longer recommended for new projects.","status":"deprecated","version":"0.13.2","language":"javascript","source_language":"en","source_url":"https://github.com/petehunt/jsx-loader","tags":["javascript","webpack","jsx"],"install":[{"cmd":"npm install jsx-loader","lang":"bash","label":"npm"},{"cmd":"yarn add jsx-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add jsx-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Webpack loader, requires Webpack to function","package":"webpack","optional":false},{"reason":"Used internally for JSX transformation","package":"react-tools","optional":false}],"imports":[{"note":"jsx-loader is not a JavaScript module; it's referenced as a string in Webpack config.","wrong":"import { jsxLoader } from 'jsx-loader'","symbol":"default","correct":"module.exports = {..., loader: 'jsx-loader'}"},{"note":"Webpack resolves loader strings automatically. Using require.resolve is unnecessary and can cause issues.","wrong":"{ test: /\\.jsx?$/, loader: require.resolve('jsx-loader') }","symbol":"jsx-loader","correct":"{ test: /\\.jsx?$/, loader: 'jsx-loader' }"},{"note":"Use 'harmony' query parameter for ES6 features, not 'es6'.","wrong":"{ test: /\\.jsx?$/, loader: 'jsx-loader?es6' }","symbol":"harmony","correct":"{ test: /\\.jsx?$/, loader: 'jsx-loader?harmony' }"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  entry: './app.jsx',\n  output: { filename: 'bundle.js' },\n  module: {\n    loaders: [\n      { test: /\\.jsx?$/, loader: 'jsx-loader?harmony' }\n    ]\n  }\n};","lang":"javascript","description":"Basic Webpack config using jsx-loader to transform JSX files with harmony (ES6) support."},"warnings":[{"fix":"Replace with babel-loader and configure @babel/preset-react.","message":"jsx-loader is no longer maintained. Use babel-loader or @babel/preset-react instead.","severity":"deprecated","affected_versions":">=0.0.1"},{"fix":"Use require.resolve('jsx-loader') in Webpack 2+ or migrate to babel-loader.","message":"Webpack 2+ changed loader resolution; jsx-loader may not work with Webpack 2+ without additional configuration.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use babel-loader with correct presets for comprehensive ES6+ support.","message":"The harmony parameter enables experimental ES6 features via react-tools; it does not support modern JavaScript features like arrow functions or classes beyond basic ES6.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install react-tools --save-dev","cause":"Missing react-tools dependency","error":"Module build failed: Error: Cannot find module 'react-tools'"},{"fix":"Ensure webpack config includes loader for .jsx files: { test: /\\.jsx?$/, loader: 'jsx-loader' }","cause":"Webpack is not configured to use jsx-loader for .jsx files","error":"Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type."},{"fix":"Add /** @jsx React.DOM */ pragma at top of file or use insertPragma parameter: 'jsx-loader?insertPragma=React.DOM'","cause":"JSX transformed code requires React in scope","error":"Uncaught ReferenceError: React is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}