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

Webpack Version: ^2.1.0-beta.22

Babel Core Version: ^6.10.4

Babel Loader Version: ^6.2.4

Please tell us about your environment: OSX 10.x / Linux / Windows 10

var webpack = require('webpack');

 module.exports = {
   entry: './dev/js/index.js',
   output: {
     path: __dirname + '/src',
     publicPath: '/',
     filename: '/js/bundle.min.js'
   },
   module: {
      rules: [
         {
           exclude: '/node_modules/',
           test: /\.(js|jsx)$/,
           loader: 'babel-loader',
           query: {
             presets: ['react', 'es2015']
             // plugins: ['transform-decorators-legacy']
           }
         },
         { test: /\.scss$/,
                    exclude: '/node_modules/',
                    use: [{loader: 'sass-loader'}, 
                          {loader: 'css-loader'}, 
                          {loader: 'style-loader'}]},
         {test: /\.(png|jpg|gif)$/,
          exclude: '/node_modules/',
          use: [{ loader: 'file-loader',
                  options: {
                      name: ['./dev/images/btn-connect-m.png'],
                      name: ['./dev/images/btn-disconnect-m.png']
                    }
                },
                {
                  loader: 'image-webpack-loader',
                  options: {
                      gifsicle: {
                        optimizationLevel: 7,
                        interlaced: false
                      },
                      optipng: {
                        optimizationLevel: 7,
                        interlaced: false
                      }
                  }
                }]
          }
      ]
   },
   resolve: {
     extensions: ['', '.js', '.jsx'],
     modules: ['node_modules']
   },
   devServer: {
     historyApiFallback: true,
     contentBase: './'
   }
 };

Expected/desired behavior: I’m expecting for dev/js/index.js to compile successfully and for some reason I am getting Current behavior:

ERROR in ./dev/js/index.js
Module parse failed: /Users/KO527/GodsOfRiotry/GodsOfRiotry-front/dev/js/index.js Unexpected token (31:4)
You may need an appropriate loader to handle this file type.
| 
| ReactDOM.render(
|     <Provider store={store}>
| 	    <Router history={history}>
| 	        <div>
 @ multi main

I do not think babelrc has anything to do with my errors but for sake of comprehensiveness, here is my file:

{
  "presets": [
    "es2015",
    "react"
  ],
  plugins: ['transform-decorators-legacy','transform-class-properties', 'transform-object-rest-spread'],
  "env": {
    "development": {
      "presets": ['react', 'es2015']
    }
  }
}

In my package.json file, here are the contents:

{
  "name": "GodsOfRiotry",
  "version": "1.0.0",
  "main": "./dev/js/index.js",
  "scripts": {
    "start": "webpack-dev-server --watch --inline --content-base src/",
    "build": "webpack --config webpack.config.js",
    "deploy": "aws s3 cp --recursive ./build s3://godsofriotry"
  },
  "license": "ISC",
  "dependencies": {
    "axios": "^0.13.1",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.9.0",
    "cross-env": "^1.0.8",
    "css-loader": "^0.23.1",
    "expect": "^1.20.1",
    "gsap": "^1.20.4",
    "history": "^4.6.1",
    "html-webpack-plugin": "^3.0.7",
    "json-loader": "^0.5.7",
    "link-react": "^3.0.0",
    "node-libs-browser": "^1.0.0",
    "node-sass": "^3.8.0",
    "node-soundcloud": "0.0.6",
    "path": "^0.12.7",
    "react": "^15.1.0",
    "react-addons-css-transition-group": "^15.6.2",
    "react-addons-test-utils": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-keydown": "^1.9.7",
    "react-redux": "^4.4.5",
    "react-redux-form": "^1.16.5",
    "react-router": "^4.0.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^4.0.8",
    "redux": "^3.5.2",
    "redux-form": "^7.3.0",
    "redux-logger": "^2.6.1",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.1.0",
    "sass-loader": "^4.0.0",
    "soundcloud": "^3.3.0",
    "style-loader": "^0.13.1",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.11.0"
  },
  "devDependencies": {
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-stage-0": "^6.5.0",
    "express": "^4.16.2",
    "file-loader": "^1.1.11",
    "image-webpack-loader": "^4.2.0",
    "react-scripts": "^1.0.0",
    "react-transform-hmr": "^1.0.4",
    "react-transition-group": "^2.2.1",
    "url-loader": "^1.0.1",
    "webpack": "^2.1.0-beta.22"
  }
}

[wkerswell-gresham]

Yeah put it in my scripts section of the package.json.

You could also just put that into the command line to run it.

The important thing was to tell it the correct location of my config

[wkerswell-gresham]

Ah my issue was that I was not pointing it to the correct config file. running webpack will look for a webpack.config.js in the root directory which it was not finding. It was using the “No config needed” webpack defaults to run and so not using my loader.
I updated my package.json to point to the correct file. webpack --mode development --config webpack/webpack.config.js