Webpack interprets imported css as jsx when loading in a bundle - reactjs

Question

main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
const src = require('../images/av.png');
require('../css/styles.css');
class APP extends React.Component{
render(){
//Render main component
return (
<div >
Hello!
<img src={src} />
</div>
);
}
}
ReactDOM.render(
//React routing
(<APP />),
document.getElementById('app'));
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
context: __dirname,
entry: {
javascript: './static/jsx/main.jsx'
},
output: {
path: path.resolve('./static/js/app/'),
filename: 'bundle.js'
},
module: {
preLoaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'source-map'
}
],
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'stage-0', 'react']
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(jpg|png)$/,
loader: 'url-loader?limit=25000',
}
]
},
};
package.json
{
"name": "",
"version": "0.0.1",
"description": "",
"license": "",
"repository": {
"type": "git"
},
"scripts": {
"gulp": "gulp",
"webpack": "webpack",
"start-webpack-server": "webpack-dev-server --hot --inline --colors --progress"
},
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.16.0",
"babel-core": "^6.6.5",
"babel-loader": "^6.2.4",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.0.16",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-stage-3": "^6.11.0",
"babelify": "^7.3.0",
"css-loader": "^0.23.1",
"es6-promise": "^4.0.5",
"eslint": "^3.10.0",
"eslint-plugin-react": "^6.6.0",
"file-loader": "^0.8.5",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-concat": "^2.6.0",
"gulp-html-replace": "^1.6.1",
"gulp-react": "^3.1.0",
"gulp-uglify": "^2.0.0",
"lodash": "^4.16.4",
"react-hot-loader": "^1.3.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.16.2",
"webpack-stream": "^3.2.0",
"source-map-loader": "^0.1.5"
}
}
As you can see I'm trying to load image and css files into my jsx . I had problems with images but now they get loaded fine. Anyway css files are interpreted as jsx by webpack although I set the css-loader for it. When I run transpiling for the project I get this error:
ERROR in ./static/css/styles.css
Module parse failed: D:\work\simpleLeafLet\static\css\styles.css Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:0)

Answer 1

The reason is a simple typo
...
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'stage-0', 'react']
}
},
...
It should be
...
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'stage-0', 'react']
}
},
...
I missed \ in "test: /\.jsx?$/"