Webpack 3.5 + React + Postcss not recompiling after changing CSS files

191 views Asked by At

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.

0

There are 0 answers