I'm experiencing a problem with webpack 3.5 + react + posts.
The configuration is this:
const path = require( "path" );
const ExtractTextPlugin = require( "extract-text-webpack-plugin" );
const CopyWebpackPlugin = require( "copy-webpack-plugin" );
const ManifestPlugin = require( "webpack-manifest-plugin" );
const webpack = require( "webpack" );
const env = process.env.MIX_ENV || "dev";
const isProduction = ( env === "prod" );
module.exports = {
entry: {
app: [ "./web/static/css/app.css", "./web/static/js/app.jsx" ],
vendor: [ "react", "react-dom", "highcharts", "moment", "axios", "react-table",
"redux", "react-router", "raven-js" ]
},
output: {
path: path.resolve( __dirname, "priv/static/" ),
filename: "js/[name].js"
},
devtool: "source-map",
resolve: {
extensions: [ ".js", ".jsx", ".css", ".png", ".svg", ".gif", ".jpeg", ".jpg", ".eot", ".ttf", ".woff", ".woff2" ],
modules: [
"web/static",
"node_modules"
]
},
resolveLoader: {
modules: [ "node_modules" ]
},
module: {
rules: [
{
test: /\.(eot|ttf|woff|woff2)$/i,
use: [ {
loader: "file-loader",
options: {
outputPath: "../static/fonts/",
publicPath: "../fonts/",
name: isProduction ? "[name]-[hash].[ext]" : "[name].[ext]"
}
} ]
},
{
test: /\.(jpg|jpeg|png|gif|svg)$/i,
use: [
{
loader: "url-loader",
options: {
outputPath: "../static/images/",
publicPath: "images/",
limit: 8000, // Convert images < 8kb to base64 strings
name: isProduction ? "[name]-[hash].[ext]" : "[name].[ext]"
}
}
]
},
{
test: /\.(css)$/,
use: ExtractTextPlugin.extract( {
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
minimize: isProduction,
importLoaders: 1
}
},
{
loader: "postcss-loader",
options: {
plugins: [
require( "stylelint" )(),
require( "precss" )(),
require( "autoprefixer" )()
],
sourceMap: true
}
}
]
} )
}, {
test: /\.(js|jsx)$/,
include: /js/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader"
}
]
} ]
},
plugins: [
new CopyWebpackPlugin( [ {
from: "./web/static/assets"
} ] ),
new webpack.ContextReplacementPlugin( /moment[\/\\]locale$/, /pt-br/ ),
new ExtractTextPlugin( "css/app.css" ),
new webpack.optimize.CommonsChunkPlugin( {
name: "vendor",
filename: "js/vendor.bundle.js"
} )
]
};
The first compilation of the assets occurs perfectly, if I change some JS or JSX file the recompilation happens with success. However after changing any CSS file the react components will break.
Warning: React.createElement: type is invalid - expected to string (for built - in components) or a class / function (for composite components) but got: undefined. You are likely to export your component from the file it's defined in. Check the render method of Header
.
If I use webpack 2.7 it works fine.