jsx-loader

0.13.2 verified Sat Apr 25 auth: no javascript deprecated

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.

Common errors

error Module build failed: Error: Cannot find module 'react-tools' ↓

cause Missing react-tools dependency

fix

npm install react-tools --save-dev

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

cause Webpack is not configured to use jsx-loader for .jsx files

fix

Ensure webpack config includes loader for .jsx files: { test: /\.jsx?$/, loader: 'jsx-loader' }

error Uncaught ReferenceError: React is not defined ↓

cause JSX transformed code requires React in scope

fix

Add /** @jsx React.DOM */ pragma at top of file or use insertPragma parameter: 'jsx-loader?insertPragma=React.DOM'

Warnings

deprecated jsx-loader is no longer maintained. Use babel-loader or @babel/preset-react instead. ↓

fix Replace with babel-loader and configure @babel/preset-react.

breaking Webpack 2+ changed loader resolution; jsx-loader may not work with Webpack 2+ without additional configuration. ↓

fix Use require.resolve('jsx-loader') in Webpack 2+ or migrate to babel-loader.

gotcha 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. ↓

fix Use babel-loader with correct presets for comprehensive ES6+ support.

Install

npm install jsx-loader

yarn add jsx-loader

pnpm add jsx-loader

Imports

default
wrong
```
import { jsxLoader } from 'jsx-loader'
```
correct
```
module.exports = {..., loader: 'jsx-loader'}
```
jsx-loader is not a JavaScript module; it's referenced as a string in Webpack config.
jsx-loader
wrong
```
{ test: /\.jsx?$/, loader: require.resolve('jsx-loader') }
```
correct
```
{ test: /\.jsx?$/, loader: 'jsx-loader' }
```
Webpack resolves loader strings automatically. Using require.resolve is unnecessary and can cause issues.

harmony

wrong

{ test: /\.jsx?$/, loader: 'jsx-loader?es6' }

correct

{ test: /\.jsx?$/, loader: 'jsx-loader?harmony' }

Use 'harmony' query parameter for ES6 features, not 'es6'.

Quickstart

Basic Webpack config using jsx-loader to transform JSX files with harmony (ES6) support.

// webpack.config.js
module.exports = {
  entry: './app.jsx',
  output: { filename: 'bundle.js' },
  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'jsx-loader?harmony' }
    ]
  }
};