我想使用 reactJS 运行一个简单的pui-react-collapse示例来创建折叠面板，但它似乎不起作用。
这是我尝试执行的非常简单的代码：
import {Collapse} from 'pui-react-collapse';
class Test extends React.Component {
render() {
return (
<Collapse header="With Divider" divider>
<div> test</div>
</Collapse>
)
}
}
但我收到了很多错误，这里有一些错误示例：
WARNING in ./~/babel-loader/lib!./~/svg-react-loader!./~/pui-css-iconography/svgs/spinner-sm.svg Module build failed: SyntaxError: C:/wamp64/www/Myproject/node_modules/pui-css-iconography/svgs/spinner-sm.svg: Unexpected token (21:12) 19 | 20 | return ( > 21 | <svg {...this.props}> | ^ WARNING in ./~/babel-loader/lib!./~/svg-react-loader!./~/pui-css-iconography/svgs/zoom_out.svg Module build failed: SyntaxError: C:/wamp64/www/MyProject/node_modules/pui-css-iconography/svgs/zoom_out.svg: Unexpected token (21:12) 19 | 20 | return ( > 21 | <svg {...this.props}> | ^ 22 | <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.5 7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/> 23 | {React.Children.map(children, (c) => (c))} 24 | </svg>
我的package.json文件：
{
"name": "MyProject",
"version": "0.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"axios": "^0.16.1",
"babel-core": "^6.24.1",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2015-loose": "^8.0.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"chart.js": "^2.5.0",
"d3": "^4.7.4",
"d3-axis": "^1.0.6",
"d3-brush": "^1.0.4",
"d3-scale": "^1.0.5",
"d3-time": "^1.0.6",
"d3-time-format": "^2.0.5",
"dc": "^2.0.2",
"eslint": "^3.19.0",
"eslint-config-google": "^0.7.1",
"flux": "^3.1.2",
"history": "^2.0.0",
"jquery": "^3.2.1",
"jquery-ui": "^1.12.1",
"prop-types": "^15.5.8",
"pui-react-collapse": "^7.5.1",
"pui-react-panels": "^7.5.1",
"react": "^15.5.4",
"react-bootstrap": "^0.30.8",
"react-chartjs-2": "^2.0.5",
"react-d3-library": "^1.1.8",
"react-dom": "^15.5.3",
"react-faux-dom": "^3.0.1",
"react-horizontal-timeline": "^1.1.1",
"react-rangeslider": "^2.0.1",
"react-redux": "^5.0.4",
"react-router": "^2.8.1",
"react-scrollbar-js": "^1.0.1",
"react-time-slider": "0.0.1",
"redux": "^3.6.0",
"redux-logger": "^3.0.1",
"redux-promise-middleware": "^4.2.0",
"redux-thunk": "^2.2.0",
"svg-react": "^1.0.9",
"svg-react-loader": "^0.3.7",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
},
"devDependencies": {
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.4.0",
"css-loader": "^0.28.0",
"style-loader": "^0.16.1"
},
"scripts": {
"dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot",
},
"author": "",
"license": "ISC"
}
和我的webpack.config.js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/client.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.svg$/,
loaders: ['babel',
{
loader: 'react-svg',
query: {
svgo: {
plugins: [{ removeTitle: false }],
floatPrecision: 2
}
}
}
]
}
]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
您对我错过的内容有所了解吗？
提前致谢。