javascript - ReferenceError: Không xác định plugin "react-html-attrs" được chỉ định
Tôi đã thử mọi cách để chạy chương trình mẫu Module-Loader dựa trên YouTube nhưng ngay cả sau khi làm theo tất cả các liên kết trên Stackoverflow về vấn đề này, tôi vẫn không thể khắc phục được sự cố. Vui lòng xem chi tiết dự án của tôi dưới đây,
Cấu trúc Dự án của Tôi:
**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 }),
],
};
Dấu vết ngoại lệ:
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)
Câu trả lời #1
Thử npm install babel-plugin-react-html-attrs --save
và trong khi bạn đang làm, $npm install babel-plugin-transform-class-properties --save
Vì lý do nào đó, tên bị rút gọn trong thông báo lỗi. Chúng giúp xử lý các thuộc tính và tên lớp từ HTML được dán vào dưới dạng mã JSX. Cú pháp cần được điều chỉnh cho JSX.
Xem https://github.com/insin/babel-plugin-react-html-attrs/blob/master/README.md
Ôi, bây giờ tôi thấy những thứ này trong package.json của bạn (tóm tắt). Bằng cách nào đó, những lỗi này đã được sửa cho tôi khi thực hiện các lệnh cài đặt npm.
Câu trả lời #2
Tôi đã sao chép cùng một kho từ learnCodeAcademy, và gặp sự cố khi cố gắng chạy webpack, tôi đã thực hiện các bước sau từng bước cho đến khi lệnh webpack chạy mà không gặp vấn đề gì.
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
Và khi tôi chạy lệnh webpack, tôi nhận được kết quả sau:
Hash: c323a36a23de43f8c0cf
Phiên bản: webpack 1.15.0
Thời gian: 2186ms Tài sản Kích thước Phân đoạn Tên phân đoạn
client.min.js 1.76 MB 0 [phát hành] chính
+ 163 mô-đun ẩn
Sau đó bạn có thể chạy nó bằng npm run dev
vì trong package.json, script được ánh xạ như sau:
"dev": "webpack-dev-server --content-base src --inline --hot"
Tôi cũng đã chỉnh sửa phần entry trong webpack.config.js như sau:
entry: {
javaScript: './js/client.js',
html: './index.html'
}
Đây là kết quả sau khi chạy npm run dev
đầu ra
Tôi hy vọng điều này sẽ giúp ích, nếu tôi đã trả lời câu hỏi của bạn, xin vui lòng đánh dấu. Cảm ơn.