Unexpected token. You may need an appropriate loader to handle this file type

[BuddhiWathsala]

I got an error as below when I try to use material-ui-dropzone in 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.

Here is my webpack.config.js file.

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',
          }
    },

};

And here my package.json file.

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

[asliwinski]

The problem is that the author didn't include the precompiled ES5 code in the package but instead just pointed the main parameter of package.json to "./src/index.js", which is ES6 (your webpack will not transpile the code sitting under node_modules). The workaround would be just to include the code from index.js as a regular component in your project. You will have to include the helper.js as well as the CSS from index.css. One of the benefits of this approach is that you can freely migrate the component to Material-UI v1 on your own.