Trying to set up webpack with react and (react)-css-modules, but encountering an issue where webpack is unable to parse the css. This is the standard configuration being used.
const webpack = require("webpack"),
merge = require("webpack-merge"),
path = require("path"),
CleanWebpackPlugin = require('clean-webpack-plugin'),
HtmlWebpackPlugin = require("html-webpack-plugin");
const lint = require("./webpack.lint");
const babel = require("./webpack.babel");
const styles = require("./webpack.styles");
const PATH = {
app: path.join(__dirname, "../../src/app.js"),
build: path.join(__dirname, "../../public"),
src : path.join(__dirname, "../../src"),
};
const commonConfig = merge([
{
entry: {
app: PATH.app
},
output: {
path: PATH.build,
filename: "[name].[ext]"
},
resolve: {
extensions: [".js", ".jsx"],
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.ejs",
//inject: "head",
}),
new CleanWebpackPlugin("public", {
verbose: true,
root: path.resolve(__dirname, "../../")
}),
new webpack.HotModuleReplacementPlugin(),
],
},
lint({
include: PATH.app,
options: {
plugins: ["react"],
}
}),
babel({
include: PATH.app
}),
styles({
include: PATH.app
})
]);
module.exports = (env) => {
return commonConfig;
};
Below is the configuration for the css loader
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = ({include, exclude = /node_modules/, options}) => ({
module: {
rules: [
{
test: /\.s?css$/,
include,
exclude,
options,
use: ExtractTextPlugin.extract({
use: [
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: true,
localIdentName: "[name]__[local]___[hash:base64:5]" ,
}
},
"postcss-loader",
"resolve-url-loader",
"sass-loader"],
fallback: "style-loader",
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
});
The javascript and jsx files are compiling correctly, however, the css is failing each time with the error message:
Module parse failed: Unexpected token (1:5) You may need an appropriate loader to handle this file type
import React, { Component } from "react";
import ReactDOM from "react-dom";
import styles from "./styles.css";
class App extends Component {
render() {
return (
<div>
<p>Hallo</p>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById("app")
);
Running node 8.7.0 and webpack 3.8.1 with the latest versions of all loaders. Any help is appreciated. Thanks!