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

Question

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"
    }
};

Don't you mean jsx-html-class ? npmjs.com/package/jsx-html-class . also.. do you really really need this? Just write className — azium
– azium, Commented Dec 13, 2016 at 21:26
my bad, i did mean jsx-html-class and that is actually the package i downloaded. I don't absolutely need it but would prefer to have it for easier readability and now i just wanna know how just for the sake of knowing. — Gabriel West
– Gabriel West, Commented Dec 13, 2016 at 21:56
If i inclue jsx-html-class in my plugins i get the error: Module build failed: TypeError: babel.Transformer is not a contstructor at module.exports (C:\Users\owner\Desktop\Reduxstagram\node_modules\jsx-html-class\index.js:2:10 if i remove jsx-html-class from the plugins i get the error: Warning: Unknown DOM property class. Did you mean className? or — Gabriel West
– Gabriel West, Commented Dec 13, 2016 at 23:32

Benji · Accepted Answer · 2017-09-07 09:50:20Z

2

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"
  ]
}

answered Sep 7, 2017 at 9:50

Benji

1,02611 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related