Chunk not available for synchronous require yet, Module parse failed: Unexpected character

[shoaibnawazrfg]

Hi!

My server side rendering via hypernova is smooth and chunk reporting (stats) is fine. But as soon as client builds (chunks) are loaded, one of my route specific component collapse all its rendering and show Error: export not found instead. Rest of common things appear and render on its place in perfect order.

Here is the warning I traced in browser console about synchronous require failure:

chunk not available for synchronous require yet: h4yQ: Module parse failed: Unexpected character '' (1:7) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) Error: Module parse failed: Unexpected character '' (1:7) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) at Object.qDBB (http://localhost:8081/static/js/manufacturer-detail-containers-ManufacturerDetailPage.3d2d03da.js:6178:7) at webpack_require (http://localhost:8081/static/js/bootstrap.d794cb5d.js:55:30) at Object.y05b (http://localhost:8081/static/js/manufacturer-detail-containers-ManufacturerDetailPage.3d2d03da.js:7124:1928) at webpack_require (http://localhost:8081/static/js/bootstrap.d794cb5d.js:55:30) at Object.X1Bx (http://localhost:8081/static/js/manufacturer-detail-containers-ManufacturerDetailPage.3d2d03da.js:4176:15) at webpack_require (http://localhost:8081/static/js/bootstrap.d794cb5d.js:55:30) at Object.X0/L (http://localhost:8081/static/js/manufacturer-detail-containers-ManufacturerDetailPage.3d2d03da.js:4028:1) at webpack_require (http://localhost:8081/static/js/bootstrap.d794cb5d.js:55:30) at Object.GNeY (http://localhost:8081/static/js/manufacturer-detail-containers-ManufacturerDetailPage.3d2d03da.js:1704:24) at __webpack_require__ (http://localhost:8081/static/js/bootstrap.d794cb5d.js:55:30)

A fallback call for requireAsync also gets fails with this call stack:

universal.js:5 Universal Component Error: Error: export not found at resolve (requireUniversalModule.js:87) render @ universal.js:5 render @ index.js:345 finishClassComponent @ react-dom.development.js:8389 updateClassComponent @ react-dom.development.js:8357 beginWork @ react-dom.development.js:8982 performUnitOfWork @ react-dom.development.js:11814 workLoop @ react-dom.development.js:11843 renderRoot @ react-dom.development.js:11874 performWorkOnRoot @ react-dom.development.js:12449 performWork @ react-dom.development.js:12370 performSyncWork @ react-dom.development.js:12347 requestWork @ react-dom.development.js:12247 scheduleWorkImpl @ react-dom.development.js:12122 scheduleWork @ react-dom.development.js:12082 enqueueSetState @ react-dom.development.js:6644 webpackJsonp.me6n.Component.setState @ react.development.js:238 handleAfter @ index.js:331 UniversalComponent._this.update @ index.js:174 (anonymous) @ index.js:293 Promise.catch (async) requireAsync @ index.js:292 componentWillMount @ index.js:214 callComponentWillMount @ react-dom.development.js:6872 mountClassInstance @ react-dom.development.js:6968 updateClassComponent @ react-dom.development.js:8337 beginWork @ react-dom.development.js:8982 performUnitOfWork @ react-dom.development.js:11814 workLoop @ react-dom.development.js:11843 renderRoot @ react-dom.development.js:11874 performWorkOnRoot @ react-dom.development.js:12449 performWork @ react-dom.development.js:12370 performSyncWork @ react-dom.development.js:12347 requestWork @ react-dom.development.js:12247 scheduleWorkImpl @ react-dom.development.js:12122 scheduleWork @ react-dom.development.js:12082 scheduleRootUpdate @ react-dom.development.js:12710 updateContainerAtExpirationTime @ react-dom.development.js:12738 updateContainer @ react-dom.development.js:12765 webpackJsonp.ytp0.ReactRoot.render @ react-dom.development.js:16069 (anonymous) @ react-dom.development.js:16488 unbatchedUpdates @ react-dom.development.js:12557 legacyRenderSubtreeIntoContainer @ react-dom.development.js:16484 hydrate @ react-dom.development.js:16540 (anonymous) @ index.js:48 client @ index.js:41 hypernova @ index.js:99 renderReact @ index.js:25 hypernovaApp @ index.js:5 lVK7 @ index.js:8 __webpack_require__ @ bootstrap ae8db9d0b438353b29b5:54 webpackJsonpCallback @ bootstrap ae8db9d0b438353b29b5:25 (anonymous) @ main.691ee709.js:1

Here are my webpack configs for client chunking

const path = require('path');
const webpack = require('webpack');
const aliases = require('./aliases');
const getClientEnvironment = require('./env');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-3-webpack-plugin');

const env = getClientEnvironment('');
const cssFilename = 'static/css/[name].[contenthash:8].css';
const extractSass = new ExtractTextPlugin({
  filename: cssFilename,
});

// the path(s) that should be cleaned
const pathsToClean = ['build/static'];

// the clean options to use
const cleanOptions = {
  root: path.resolve(__dirname, '../'),
  verbose: true,
  dry: false,
};

module.exports = {
  name: 'client',
  target: 'web',
  devtool: 'source-map',
  entry: path.resolve(__dirname, '../src/index.js'),
  output: {
    // libraryTarget: 'commonjs',
    filename: 'static/js/[name].[chunkHash:8].js',
    chunkFilename: 'static/js/[name].[chunkHash:8].js',
    path: path.resolve(__dirname, '../build'),
    publicPath: '/',
  },
  stats: 'verbose',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.(sass|scss|css)$/,
        use: extractSass.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader'],
        }),
      },
    ],
  },
  // mode: 'development',
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: aliases,
  },
  plugins: [
    extractSass,
    new webpack.DefinePlugin(env.stringified),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HashedModuleIdsPlugin(), // not needed for strategy to work (just good practice)
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks(module) {
        // this assumes your vendor imports exist in the node_modules directory
        return module.context && module.context.includes('node_modules');
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'bootstrap',
      minChunks: Infinity,
    }),
    new webpack.optimize.CommonsChunkPlugin({
      children: true,
      minChunks: 3,
    }),
    new CleanWebpackPlugin(pathsToClean, cleanOptions),
    // new UglifyJsPlugin(),
  ],
};

What are we missing here? How can we locate the location that is point of failure?