Gabriel West
Gabriel West

Reputation: 941

How to setup webpack.config to use jsx-html-class in Reactjs

I've already installed jsx-html-class package via npm but i'm not sure how to modify my webpack.config.js file to make use of it.

var webpack = require("webpack");
var path = require("path");

module.exports = {
    context: path.join(__dirname, "src"),
    entry: "./js/index.js",
    module: { 
        loaders: [
            {
                test:/\.jsx?$/,
                exclude: "node_modules",
                loader: "babel-loader",
                query: {
                            presets:["react", "es2015", "stage-0"],
                            plugins:["transform-decorators-legacy", "jsx-html-class"]
                }
            }
     ]
    },
    output: {
        path: __dirname + "/src/",
        filename: "bundle.js"
    }
};

Upvotes: 2

Views: 226

Answers (1)

Benji
Benji

Reputation: 1026

I solved the same problem with this:

npm install --save-dev babel-plugin-react-html-attrs

then add this to your webpack config:

loaders: [{
    test: /\.js?$/,
    loader: 'babel-loader',
    query: {
        presets: ['react', 'es2015'],
        plugins: ['react-html-attrs']
    }
}]

or via .babelrc

{
  "plugins": [
    "react-html-attrs"
  ]
}

Upvotes: 2

Related Questions