Webpack rendering sass, babel and es2015 - You may need an appropriate loader to handle this file type

Question

I want to configure webpack to render es15, react and sass.

After i added code for sass loading I get following message:

ERROR in ./src/app.jsx
Module parse failed: /home/giedrius/projects/react-redux/react-redux-seed/src/app.jsx Unexpected token (7:11)
You may need an appropriate loader to handle this file type.
| class App extends React.Component {
|   render () {
|     return <Header/>;
|   }
| }
 @ multi (webpack)-dev-server/client?http://localhost:8085 ./src/app.jsx

My webpack config looks like this:

const path = require('path'); 
let webpack = require('webpack');
let ExtractTextPlugin = require("extract-text-webpack-plugin");

    module.exports = {
         entry: './src/app.jsx',
         output: {
             path: path.resolve(__dirname, 'public', 'js'),
             filename: 'app.bundle.js'
         },
         resolve: {
            extensions: ['.js', '.jsx']
         },
         module: {
             loaders: [
                {
                    test: /.jsx?$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    options: { presets: ['es2015', 'react'] }
                }
              ],
                rules: [
                  {
                    test: /\.scss$/,
                    use: ExtractTextPlugin.extract({
                      fallback: 'style-loader',
                      use: ['css-loader', 'sass-loader']
                    })
                  }
                ]
      },
      plugins: [
        new ExtractTextPlugin("public/css/styles.css"),
      ]

     };

Server is starting and showing header, so unsure why is this message is appearing. Anyone had similar issues ?

The code that was added was rules and plugin array.

Any help would be appreciated

Thanks in advance

Answer 1

You have both loaders and rules, they are basically the same thing. Loaders was renamed to rules. You should have only one of them.

Check this for more info: https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

Try this:

 module: { rules: [{ test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: ['es2015', 'react'] } }, { test: /\\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) } ] }