ReferenceError: Unknown plugin "react-html-attrs" specified

Question

I tried to fully run the YouTube- based Module-Loader sample program, but even after completing all the links in stackoverflow, I still cannot fix the problem. Please find the details of my project below.

My project structure:

**package.json** { "name": "react-tutorials", "version": "0.0.0", "description": "", "main": "webpack.config.js", "dependencies": { "babel-core": "^6.17.0", "babel-loader": "^6.2.5", "babel-plugin-add-module-exports": "^0.1.2", "babel-plugin-react-html-attrs": "^2.0.0", "babel-plugin-transform-class-properties": "^6.3.13", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babel-preset-stage-0": "^6.16.0", "react": "^0.14.6", "react-dom": "^0.14.6", "webpack": "^1.12.9", "webpack-dev-middleware": "^1.8.4", "webpack-dev-server": "^1.14.1", "webpack-hot-middleware": "^2.12.2" }, "devDependencies": { "babel-core": "^6.17.0", "babel-loader": "^6.2.5", "babel-plugin-add-module-exports": "^0.1.2", "babel-plugin-react-html-attrs": "^2.0.0", "babel-plugin-transform-class-properties": "^6.3.13", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babel-preset-stage-0": "^6.16.0", "react": "^0.14.6", "react-dom": "^0.14.6", "webpack": "^1.12.9", "webpack-dev-middleware": "^1.8.4", "webpack-dev-server": "^1.14.1", "webpack-hot-middleware": "^2.12.2" }, "scripts": { "dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } 

webconfig.js

 var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); module.exports = { context: __dirname, devtool: debug ? "inline-sourcemap" : null, entry: "./js/scripts.js", module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-0'], plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'], } } ] }, output: { path: __dirname + "/js", filename: "scripts.min.js" }, plugins: debug ? [] : [ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), ], }; 

Exception Trace:

 D:\Software\Ping\react-js-tutorials-master\react-js-tutorials-master\1-basic-rea ct>webpack Hash: 826e21c818de1882d366 Version: webpack 1.13.2 Time: 1424ms + 1 hidden modules ERROR in ./js/scripts.js Module build failed: ReferenceError: Unknown plugin "react-html-attrs" specified in "base" at 0, attempted to resolve relative to "D:\\Software\\Ping\\react-js- tutorials-master\\react-js-tutorials-master\\1-basic-react\\js" at D:\Software\Ping\react-js-tutorials-master\react-js-tutorials-master\1-ba sic-react\node_modules\babel-core\lib\transformation\file\options\option-manager .js:176:17 at Array.map (native) at Function.normalisePlugins (D:\Software\Ping\react-js-tutorials-master\rea ct-js-tutorials-master\1-basic-react\node_modules\babel-core\lib\transformation\ file\options\option-manager.js:154:20) at OptionManager.mergeOptions (D:\Software\Ping\react-js-tutorials-master\re act-js-tutorials-master\1-basic-react\node_modules\babel-core\lib\transformation \file\options\option-manager.js:228:36) at OptionManager.init (D:\Software\Ping\react-js-tutorials-master\react-js-t utorials-master\1-basic-react\node_modules\babel-core\lib\transformation\file\op tions\option-manager.js:373:12) at File.initOptions (D:\Software\Ping\react-js-tutorials-master\react-js-tut orials-master\1-basic-react\node_modules\babel-core\lib\transformation\file\inde x.js:221:65) at new File (D:\Software\Ping\react-js-tutorials-master\react-js-tutorials-m aster\1-basic-react\node_modules\babel-core\lib\transformation\file\index.js:141 :24) at Pipeline.transform (D:\Software\Ping\react-js-tutorials-master\react-js-t utorials-master\1-basic-react\node_modules\babel-core\lib\transformation\pipelin e.js:46:16) at transpile (D:\Software\Ping\react-js-tutorials-master\react-js-tutorials- master\1-basic-react\node_modules\babel-loader\index.js:38:20) at Object.module.exports (D:\Software\Ping\react-js-tutorials-master\react-j s-tutorials-master\1-basic-react\node_modules\babel-loader\index.js:131:12) 

Answer 1

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

and while you're on it, $ npm install babel-plugin-transform-class-properties -save

For some reason, the name is abbreviated in the error message. They help to handle attributes and class names from html inserted as JSX codes. The syntax must be adapted to JSX.

See https://github.com/insin/babel-plugin-react-html-attrs/blob/master/README.md

Oops, now I see them in your .json package (TL; DR). Somehow these errors were fixed for me by performing npm installations.

Answer 2

I cloned the same repository from learnCodeAcademy and got problems trying to start webpack , I did the following step by step until I got the webpack command launched without any problems.
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-plugin-react-html-attrs --save-dev
npm install babel-plugin-transform-decorators-legacy --save-dev
npm install babel-plugin-transform-class-properties --save-dev
npm install babel-preset-react --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-stage-0 --save-dev
npm install react-dom --save-dev
npm install react --save-dev

And when I ran the webpack command, I got the following result:

Hash: c323a36a23de43f8c0cf
Version: webpack 1.15.0
Time: 2186 ms Chunk Names Block Size Attributes
client.min.js 1.76 MB 0 [emitted] core
+ 163 hidden modules

Then you can run it with npm run dev
as in the package.json script as shown below:

"dev": "webpack-dev-server --content-base src --inline --hot"

I also changed the webpack.config.js entry section as follows:
entry: {
javaScript: './js/client.js',
html: './index.html'
}

This is the result after running npm run dev

output

Hope this helps if I answer your question, kindly mark it. Thanks.