Webpack 4 unable to built production for web

Question

I am breaking my head, trying to understand why this production build is not working on the browser.

So basically I have a development config that works flawlessly, but the production build keeps displaying for some weird reason Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. on the console.

Any help on this would be much appreciated.

Here is my folder structure

package.json

"build": "webpack --config=config/webpack.config.js --env production --progress",
"start": "webpack-dev-server --config=config/webpack.config.js --env development --open"

And webpack.config.js (I have omitted the developer config since it works fine )

... 
// Paths
getPaths = ({
  sourceDir = '../app', 
  distDir = '../dist', 
  staticDir = 'static', 
  images = 'images', 
  fonts = 'fonts', 
  scripts = 'scripts', 
  styles = 'styles'} = {}) => {
    const assets = { images, fonts, scripts, styles }
    return Object.keys(assets).reduce((obj, assetName) => {
      const assetPath = assets[assetName]
      obj[assetName] = !staticDir ? assetPath : `${staticDir}/${assetPath}`
      return obj
    },{
      app: path.join(__dirname, sourceDir),
      dist: path.join(__dirname, distDir),
      staticDir
    })
},
paths = getPaths(),
publicPath = '',


// Main module
commonConfig = merge([{
  context: paths.app,
  resolve: {
    unsafeCache: true,
    symlinks: false
  },
  entry: [`${paths.app}/scripts/index.jsx`, `${paths.app}/styles/styles.scss`],
  output: { path: paths.dist, publicPath },
  plugins: [
    new HtmlPlugin(),
  ]
  },
  load.Html(),
 })
]),

// Build
productionConfig = merge([
  {
    mode: 'production'
  },
  load.Scripts({
    include: paths.app,
    exclude: path.resolve(__dirname, 'node_modules'),
    options: { 
      configFile: path.resolve(__dirname, 'babel.config.js'),
    }
  }),

  load.ExtractCSS({
    include: paths.app,
    options: {
      filename: `${paths.styles}/[name].min.[contenthash:8].css`,
      chunkFilename: `${paths.styles}/[id].[contenthash:8].css`,
      publicPath: '../'   
    }
  })
]),

// Merge module
module.exports = env => {
  process.env.NODE_ENV = env
  return merge(commonConfig, env === 'production' ? productionConfig : developmentConfig
  )
}

And finally the referenced modules webpack.modules.js

exports.Html = () => ({
  module: {
    rules: [
        {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  }
})



exports.MinifyCSS = ({ options }) => ({
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: options,
        canPrint: true // false for analyzer
      })
    ]
  }
})


exports.ExtractCSS = ({ include, exclude, options } = {}) => ({
  module: {
    rules: [{
      test: /\.scss$/,
      include,
      exclude,
      use: [
        { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../../'  } },
        'css-loader', 
        { loader: 'postcss-loader', options: { plugins: () => [require('autoprefixer')] }}, 
        'fast-sass-loader'
        ]
    }]
  },
  plugins: [ new MiniCssExtractPlugin(options) ]
})


exports.Scripts = ({ include, exclude, options } = {}) => ({
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      include, 
      exclude,
      use: [{ loader: 'babel-loader', options }]
    }]
  }
})

After runing npm run build when I open the website on https://localhost/React/Transcript/dist/ I get:

Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Webpack 4 unable to built production for web

Answers (1)

Related Questions