faceyspacey / faceyspacey/require-universal-module

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

Open
#15 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
29
Forks
3
PR merge metrics
No merged PRs in 30d

Description

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**
```javascript
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?

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.