Webpack2 + Sass + React, can't figure out error?

Question

Node.js

Good day, I decided to look at the newfangled webpack (before that I did the assembly through gulp) and stuck with the config, more specifically, there is a project, it has js, jsx, scss files, I try to make a config that would collect two
js bundles and jsx files for me in bundle.js
scss files in bundle.css
actually the config itself

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


module.exports = {
  entry : './application/sources/js/app.js',
  output: {
    path: path.resolve(__dirname, './application/build'),
    filename: '[name].bundle.js',
  },
  module : {
    rules : [
      {
        test : /\.scss$/,
        loader:  ExtractTextPlugin.extract({
          loader: [
            {
              loader : 'css-loader'
            },
            {
              loader  : 'sass-loader',
              options : {
                outputStyle : 'expanded'
              }
            }
          ]
        })
      },
      {
        test: /\.jsx$/,
        exclude: [/node_modules/],
        loader: "babel-loader",
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        loader: "babel-loader",
        query: {
          cacheDirectory: true,
        },
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].bundle.css',
      allChunks: true,
    })
  ],
}

sass seems to be building, but when I try to build js I get an error

ERROR in ./application/sources/js/app.js
Module not found: Error: Can't resolve 'test' in '/home/awd/projects/projects/dboy/application/sources/js'
@ ./application/ sources/js/app.js6:0-24

js file is like this:

//import styles
import './../sass/main.scss';

import React from 'react';
import ReactDOM from 'react-dom';
import Auth from 'test';

ReactDOM.render('<Auth />',document.getElementById('root'));

the test.jsx file is next to app.js and contains the following code:

import React from 'react';

class Auth extends React.Component {
  render() {
    return '<h1>This is auth form</h1>'
  }
}

module.exports = Auth;

Answer 1

It's all about the file extension - jsx. For webpack, the standard extension is js and json (as it is for nodejs), so it can be omitted. Add the extension import Auth from 'test.jsx'. Alternatively, add this extension to the resolve.extensions option so that webpack automatically considers it "standard" and can be omitted.