We Keep Coding

CSS ReactJs - You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

I already know that this problem has been asked many times. I looked over all the questions, but it doesn't work. I converted typescript to javascript, everything is going very well until I get to implement css.
After importing my css, I get this error.
ERROR in ./src/components/Navbar.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .NavbarContainer {
| width: 100%;
| height: 100%;
# ./src/components/Nav.jsx 15:0-22
# ./src/components/index.js
# ./src/app.jsx
# ./src/index.jsx
The CSS I want to import is for Navbar only.
This is my webpack:
var HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}
]
},
resolve: {
mainFiles: ['index', 'Index'],
extensions: ['.js', '.jsx'],
alias: {
'#': path.resolve(__dirname, 'src/'),
}
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html'
})],
devServer: {
historyApiFallback: true
},
externals: {
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:4000'
})
}
}
and this is my package.json
{
"name": "glitcher",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --open"
},
"dependencies": {
"formik": "^2.1.4",
"history": "^4.10.1",
"prop-types": "^15.7.2",
"query-string": "^6.11.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"rxjs": "^6.3.3",
"yup": "^0.28.1"
},
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^3.6.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.11.0",
"less-loader": "^5.0.0",
"path": "^0.12.7",
"style-loader": "^1.1.3",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
}
}
The code works properly. I tried to uninstall everything and do another project but I think the error does not come from the npm packages. Something escapes me in webpack.config and I would need a little help.
Thank you!

The less-loader plugin converts Less files to CSS. The rule should be:
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}
The compiler is throwing an error because you are trying to pass a CSS file to the Less loader - it doesn't know what to do with it. If you haven't actually got any Less files in your project, just get rid of the less-loader and change the property test to /\.css$/:
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
Otherwise, keep both rules in to cover both Less and CSS files.

Configuring webpack and babel to transform rest arguments in a node_modules dependancy

I'm using webpack and babel to compile my JavaScript to ES5. It's working nicely on my own code, but my library started throwing errors in Internet Explorer browsers when I added debug as a dependency. The error points to a rest parameter (e.g. function(...t)) as the place parsing failed.
The main file in the debug module is ES6 (and that's not going to change) and unfortunately there doesn't seem to be any guidance there on babel configuration for node_modules dependencies.
The CLI output doesn't seem to include anything revealing. The output files are being created, as expected, and they work on modern browsers. It's just that rest parameter I can't get rid of.
Can anyone point me in the right direction? It looks like #babel/plugin-transform-parameters should fix the issue, but none of the configuration variations I've tried have had any effect on the debug code.
Edit: After a closer look, it seems that the problem may be that babel is doing too much transpiling, rather than not enough. It looks like this bit of code from node_modules/debug/dist/debug.js is being transformed into the problematic rest parameter.
IN:
function log() {
var _console;
// This hackery is required for IE8/9, where
// the `console.log` function doesn't have 'apply'
return (typeof console === "undefined" ? "undefined" : _typeof(console)) === 'object' && console.log && (_console = console).log.apply(_console, arguments);
}
OUT:
function(n){e.log=function(...A){return"object"==typeof console&&console.log&&console.log(...A)}
I've tried including both my source directory and the debug module as an array:
{
loader: 'babel-loader',
test: [path.resolve(__dirname, 'src'), /node_modules\/debug/]
},
I've tried including all .js files, but excluding most node_modules sub-directories...
{
loader: 'babel-loader',
test: /(\.jsx|\.js)$/,
exclude: /node_modules\/(?!debug)/
},
Even splitting into multiple rules:
{
loader: 'babel-loader',
test: /(\.jsx|\.js)$/,
exclude: /node_modules/
},
{
loader: 'babel-loader',
test: /node_modules\/debug/
},
Using a function had the same effect:
const shouldExclude = filename => {
if (/my-project[\\\/]src/.test(filename)) return false;
if (/my-project[\\\/]test/.test(filename)) return false;
if (/my-project[\\\/]node_modules[\\\/]debug/.test(filename)) return false;
return true;
};
...
module: {
rules: [{ test: /\.js$/, exclude: shouldExclude, use: ['babel-loader'] }],
},
Here are the mostly-complete config files, for reference
package.json
{
"name": "my-js-library",
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.9.0",
"#babel/plugin-transform-object-assign": "^7.8.3",
"#babel/plugin-transform-parameters": "^7.9.3",
"#babel/plugin-transform-runtime": "^7.9.0",
"#babel/polyfill": "^7.8.7",
"#babel/preset-env": "^7.9.0",
"#babel/register": "^7.9.0",
"#babel/runtime": "^7.9.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-add-module-exports": "^1.0.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^7.0.0-beta.3",
"classlist-polyfill": "^1.2.0",
"debug": "4.1.1",
"eslint": "^6.8.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-html": "^6.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"yargs": "^15.3.1"
},
"dependencies": {}
}
.babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
"babel-plugin-add-module-exports",
"transform-class-properties",
"#babel/plugin-transform-object-assign",
"#babel/plugin-transform-runtime",
"#babel/plugin-transform-parameters"
]
}
webpack.config.js
const config = {
mode: 'production,
entry: __dirname + '/src/index.js',
devtool: 'source-map',
output: {
path: __dirname + '/lib',
filename: my-js-library.min.js,
library: 'MyJsLibrary',
libraryTarget: 'umd',
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /node_modules\/debug/,
loader: 'babel-loader',
},
{
test: /(\.jsx|\.js)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
},
],
},
stats: 'minimal',
resolve: {
modules: [path.resolve('./node_modules'), path.resolve('./src')],
extensions: ['.json', '.js'],
},
};
module.exports = config;

TypeError: Attempting to change enumerable attribute of unconfigurable property (Vue.js SPA)(Webpack 4)(iPhone 6S)(iOS Safari)

(2018-July-29)
1. Background (Tech Stack)
Vue.js 2 (I am building a Single Page Application(SPA) with Vuex, vue-router)
Webpack 4
2. Problem
Visit my website in iOS Safari,
got white screen (because JS error, so nothing render)
3. Screenshot
Zoom in the error mesage
3. Error message
TypeError: Attempting to change enumerable attribute of unconfigurable property.
4. How to reproduce?
Visit https://browserstack.com
Choose iPhone 6S Safari
Visit https://wittcism.com
3. My Config
/webpack.config.js
var path = require('path')
var webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin'); // https://github.com/webpack-contrib/copy-webpack-plugin
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js',
},
module: {
rules: [{
test: /\.md$/,
use: 'raw-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minify: true }
}
]
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': path.resolve(__dirname, './src/'),
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.output = {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: '[name].[hash].js',
},
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Wittcism',
filename: './index.html',
template: './template/index.html',
minify: true,
}),
])
}
.babelrc
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
package.json
{
"name": "hide",
"description": "hide",
"version": "1.1.0",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8081 --host 0.0.0.0",
"build": "cross-env NODE_ENV=production webpack --mode production --progress --hide-modules"
},
"dependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.1.1",
"bootstrap-vue": "^2.0.0-rc.11",
"es6-promise": "^4.2.4",
"jstransformer-verbatim": "^1.1.1",
"jwt-decode": "^2.2.0",
"moment": "^2.22.2",
"qiniu-js": "^2.4.0",
"tippy.js": "^2.5.4",
"tui-editor": "^1.2.3",
"v-tooltip": "^2.0.0-rc.33",
"vue": "^2.5.11",
"vue-carousel": "^0.10.0",
"vue-i18n": "^8.0.0",
"vue-markdown": "^2.2.4",
"vue-router": "^3.0.1",
"vuelidate": "^0.7.4",
"vuex": "^3.0.1"
},
"browserslist": [
"> 1%",
"last 2 versions",
"ie 6-8"
],
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.2",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.0",
"pug": "^2.0.3",
"pug-loader": "^2.4.0",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.7",
"style-loader": "^0.21.0",
"vue-loader": "^14.2.2",
"vue-template-compiler": "^2.4.4",
"webpack": "^4.16.3",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^2.9.1"
}
}
Question: How to fix: TypeError: Attempting to change enumerable attribute of unconfigurable property?
My Guess: iOS Safari doesn't support ES6 fully

Module parse failed: Unexpected character for woff woff2 and ttf file webpack

I have webpack.config.js file and added loader for each font type in individual module block but when I run yarn start
webback complied successfully with this details in terminal
f4769f9bdb7466be65088239c12046d1.eot 20.1 kB [emitted]
448c34a56d699c29117adc64c43affeb.woff2 18 kB [emitted]
fa2772327f55d8198301fdb8bcfc8158.woff 23.4 kB [emitted]
e18bbf611f2a2e43afc071aa2f4e1512.ttf 45.4 kB [emitted]
89889688147bd7575d6327160d64e760.svg 109 kB [emitted]
bundle.js 1.56 MB 0 [emitted] [big] main
favicon.ico 1.15 kB [emitted]
index.html 605 bytes [emitted]
and page open in the browser with bootstrap css applied on it BUT in the console, it gives multiple errors for woff woff2 and ttf file ( see image)
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
package.json
"dependencies": {
"bootstrap": "^3.3.7",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"history": "^4.7.2",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"path": "^0.12.7",
"postcss-loader": "^2.0.8",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-redux-form": "^1.16.0",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"style-loader": "^0.19.0",
"svg-inline-loader": "^0.8.0",
"uglifyjs-webpack-plugin": "^1.0.1",
"url-loader": "^0.6.2",
"webpack-combine-loaders": "^2.0.3"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.2",
"babel-loader": "^7.1.2",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"eslint": "^4.10.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-flowtype": "^2.39.1",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.4.0",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server"
}
webpack.config.js
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // eslint-disable-line
const path = require('path');
const combineLoaders = require('webpack-combine-loaders');
const BUILD_DIR = path.resolve(__dirname, 'build');
const APP_DIR = path.resolve(__dirname, 'src');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
favicon: './src/assets/favicon.ico',
inject: 'body'
});
// const extractPluginConfig = new ExtractTextPlugin({filename:'style.css', disable: false, allChunks: true});
module.exports = {
context: __dirname,
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
APP_DIR + '/index.jsx',
],
output: {
publicPath: '/',
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?/,
loader: 'babel-loader',
include: path.join(__dirname, 'src'),
exclude: /(node_modules|bower_components)/,
query: { presets: ["env", "react"] }
},
{
test: /\.css$/,
// exclude: /node_modules/,
loader: 'style-loader!css-loader?importLoaders=1'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!postcss-loader!less-loader'
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.png$/,
loader: "url-loader",
query: {
limit: 100000
}
},
{
test: /\.jpg$/,
loader: "url-loader"
},
{
test: /\.svg(\?.*)?$/,
loader: "url-loader",
query: {
limit: 10000,
mimetype: 'image/svg+xml'
}
},
{
test: /\.(woff2?)(\?.*)?$/,
loader: "url-loader",
query: {
limit: 10000,
mimetype: 'application/font-woff'
}
},
{
test: /\.(ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
mimetype: 'application/octet-stream'
}
},
{
test: /\.eot(\?.*)?$/,
loader: 'file-loader'
}
]
},
resolve: {
extensions: ['.js', '.jsx', '.css', '.less', '.json']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}
}),
// new UglifyJsPlugin(), for production server only
HtmlWebpackPluginConfig
],
devServer: {
historyApiFallback: true,
hot: true
}
}
index.jsx
import 'bootstrap/dist/css/bootstrap.css'
what I have tried various comibinations in place of above modules for loaders from github solution but none of them is working, see the trials
trial 1 ( using file loader)
{
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
loader: 'file-loader?name=[path][name].[ext]?[hash]'
}
trial 2 ( using url loader)
{
test: /\.(woff(2)?|eot|ttf|otf)(\?[a-z0-9]+)?$/,
loader: 'url-loader?limit=100000'
}
trial 3 (using url loader with lower limit)
{
test: /\.(woff2?|ttf|eot|svg|png|jpe?g|gif)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=8192'
},

In webpack 4, you need:
{
test: /\.(woff|woff2|ttf|eot)$/,
use: 'file-loader?name=fonts/[name].[ext]!static'
}
eg use file-loader.

there is my config about fonts
{
test: /\.(woff|woff2|ttf|eot)$/,
use: 'file?name=fonts/[name].[ext]!static'
}
maybe is useful
--- added ---
resolve: {
extensions: ['.js', '.jsx', '.css', '.less', '.json'],
modules: ['node_modules', 'path/to/your/static_resource']
}

I installed a vue plugin in a project that i'm working and i was getting this error to.
I tried to follow the instructions, but i do not know it they are outdated. I'm sharing my solution. In webpack.config.js i added the following set:
module: {
rules: [
... --> other existing rules
{
test: /\.(woff|woff2|ttf|eot)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]!static'
},
include: /node_modules/
}
]
}

I am using vue cli webpack and below code fixed the error
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
}

I am doing React/Redux and also got this error.
I added this line in my webpack.config.dev.js to solve the issue:
module: {
loaders: [
...,
{test: /\.png$/, loader: 'file'} // Line added
]
}
Then in my R/R codes, I used import (ES6) to require the image. Then I do:
<img src={myPNGImage} .../>

In PWA studio for Magento2 ,
You can add a line in webPackConfig.js as follows
config.module.rules.push({​​​​​​ test: /\.(woff|woff2|ttf|eot)$/, use: 'file-loader' }​​​​​​);
This should do the job.

The accepted answer worked for me, however since webpack 4 the answer needs a slight update to use file-loader instead of just file, e.g.:
{
test: /\.(woff|woff2|ttf|eot)$/,
use: 'file-loader?name=fonts/[name].[ext]!static'
}

After build in webpack ReactJS does't work

After webpack command webpack catch all files and finish build in dist folder, but react component doesn't work. I don't understand why. My configs attached:
package.json
{
"name": "name",
"version": "1.0.0",
"description": "Example",
"main": "index.js",
"scripts": {
"watch": "webpack --progress --watch",
"start": "webpack-dev-server --open",
"build": "webpack"
},
"devDependencies": {
"autoprefixer": "^7.1.3",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.5.3",
"optimize-css-assets-webpack-plugin": "^3.1.1",
"postcss-loader": "^2.0.6",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
},
"browserslist": [
"last 15 versions",
"> 1%",
"ie 8",
"ie 7"
]
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: ['./app/app.js', './app/sass/app.sass'
],
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "postcss-loader"]
}),
},
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'sass-loader'])
},
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: 'img/[name].[ext]', // check the path
}
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: {
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]', // check the path
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Build version'
}),
new ExtractTextPlugin({
filename: 'css/app.min.css',
allChunks: true,
}),
new OptimizeCssAssetsPlugin()
]};
babel.rc
{"presets":["es2015", "react"]}
app file system:
app/
components/
fonts/
img/
sass/
app.js
index.html
index.html has a <div> with id="app" and script with src="app.js" in the body.

Move react and react-dom to dependencies instead of devDependecies in your package.json then try to build again.
Check this answer for an explanation:
Bower and devDependencies vs dependencies

Your react and react-dom packages are dependencies try moving them there.
Try modifying your webpack config file to some like this:
module.exports = {
entry: [
'./app/app.js',
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
publicPath: '/dist',
sourceMapFilename: 'bundle.map',
},
devtool: process.env.NODE_ENV === 'production' ? undefined : 'cheap-module-eval-source-map',
resolve: {
modules: ['node_modules', './app/components'],
extensions: ['.js', '.jsx'],
},
module: {
loaders: [
{
test: /(\.js$|\.jsx$)/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['react', 'es2015'],
},
},
],
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
],
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
minimize: true,
compressor: {
warnings: false,
},
})
],
};
Add other necessary rules you need to the rules array.
With this config though, you don't need the .babelrc file as everything is all in place.