予期しないトークン。このファイルタイプを処理するために適切なローダーが必要な場合があります

Question

ReactJでmaterial-ui-dropzoneを使用しようとすると、以下のようなエラーが表示されます。

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

この問題の解決に役立つ人はいますか？あなたは、次の

 { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      use: [ 
       { 
        loader: 'babel-loader', 
        query: { 
         presets: ['es2015', 'react'], 
        }, 
       }, 
      ], 
     }, 

でnode_modulesを除いている

Answer 1

はexclude: /node_modules/'を削除し、私はその問題が解決しない理由を見ません。

それは問題を解決できますが、あなたはローダーtest: /\.jsx?$/と同じことをしたいと思うかもしれません。