当我尝试material-ui-dropzone在 ReactJs 中使用时，出现如下错误。
ERROR in ./node_modules/material-ui-dropzone/src/index.js
Module parse failed: /home/buddhik/Documents/InternWork/React/licensemanager/node_modules/material-ui-dropzone/src/index.js Unexpected token (106:31)
You may need an appropriate loader to handle this file type.
| }
|
| handleRequestCloseSnackBar = () => {
| this.setState({
| openSnackBar: false,
@ ./src/scenes/license/RequestLicense.jsx 13:26-57
@ ./src/app.jsx
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js
webpack: Failed to compile.
这是我的webpack.config.js文件。
const path = require('path');
module.exports = {
context: path.resolve(__dirname, './src'),
entry: {
index: './index.js',
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.html$/,
use: [{
loader: 'html-loader',
}],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
},
},
],
},
{
test: /\.(png|jpg|svg|cur|gif|eot|svg|ttf|woff|woff2)$/,
use: ['url-loader'],
},
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'eslint-loader',
},
{
test: /\.scss$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
}, {
loader: 'sass-loader',
}],
},
],
},
resolve: {
extensions: ['.js', '.json', '.jsx', '.scss'],
},
devServer: {
contentBase: path.join(__dirname, 'public'),
publicPath: '/dist',
historyApiFallback: {
index: '/dist/bundle.js',
}
},
};
这是我的package.json文件。
{
"name": "reference-react-app",
"version": "1.0.0",
"description": "Reference React App",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"clean": "rimraf dist",
"dev": "webpack-dev-server --hot --inline --progress --history-api-fallback",
"lint": "eslint . --ext .jsx --ext .js",
"build": "webpack -p"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"bugs": {
"url": ""
},
"homepage": "",
"dependencies": {
"axios": "^0.17.0",
"history": "^4.7.2",
"material-design-icons": "^3.0.1",
"material-ui": "^0.19.4",
"material-ui-dropzone": "^1.0.3",
"react": "^15.6.1",
"react-cookies": "^0.1.0",
"react-dom": "^15.6.1",
"react-pagination-table": "^1.1.0",
"react-router": "^2.8.1",
"react-router-server-location": "^2.0.0",
"resolve-url-loader": "^2.1.1",
"universal-cookie": "^2.1.2",
"url-loader": "^0.6.2"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"eslint": "^4.3.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.1.0",
"html-loader": "^0.5.0",
"rimraf": "^2.6.1",
"react-router": "^2.8.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
}
}
有人可以帮助解决这个问题吗？