Webpack2 + Sass + React, не могу понять ошибку?

Question

[Андрей Сергеевич]

Доброго времени суток, решил посмотреть новомодный webpack (до этого сборку делал через gulp) и встрял с конфигом, конкретнее, есть проект, в нем есть js,jsx,scss файлы, стараюсь сделать конфиг, который собирал бы мне два бандла
js и jsx файлы в bundle.js
scss файлы в bundle.css
собственно сам конфиг

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 вроде бы собирает, но при попытке собрать js получаю ошибку

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.js 6:0-24

js файл такой:

//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'));

файл test.jsx лежит рядом с app.js и содержит следующий код:

import React from 'react';

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

module.exports = Auth;

Comments

[Кирилл Халитов]

Вы делаете импорт мдуля по умолчанию, а экпорт по умолчанию не проходит.
Попробуйте вместо module.exports = Auth использовать export default Auth.

Answer 1

[qtuz]

Всё дело в расширении файла - jsx. Для вебпака стандартным расширением является js и json (как и для nodejs), поэтому оно может быть опущено. Добавьте в место импорта jsx файла расширение import Auth from 'test.jsx'. Либо добавьте в опцию resolve.extensions это расширение, чтобы вебпак автоматически считал его "стандартным" и его можно не указывать.