faceyspacey / faceyspacey/webpack-flush-chunks

[FLUSH CHUNKS]: Unable to find pages-Landing in Webpack chunks. Please check usage of Babel plugin.

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

Description

Hi, guys. I faced with this issue after I had updated webpack from 3-rd to 4-th version. The problem is that path is `pages-Landing` incorrect. After client build was created this page is placed as `pages/Landing`
Here is my webpack client.dev.js config
```
const path = require('path');
const webpack = require('webpack');
const WriteFilePlugin = require('write-file-webpack-plugin');
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
const defineEnv = require('./dotenv');

module.exports = {
mode: 'development',
name: 'client',
target: 'web',
devtool: 'eval',
entry: [
'babel-polyfill',
'fetch-everywhere',
'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=false&quiet=false&noInfo=false',
'react-hot-loader/patch',
path.resolve(__dirname, '../src/index.js'),
],
output: {
filename: '[name].js',
chunkFilename: '[name].js',
path: path.resolve(__dirname, '../buildClient'),
publicPath: '/static/',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/,
use: [
{
loader: ExtractCssChunks.loader,
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]',
},
},
},
'postcss-loader',
],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
},
],
},
],
},
resolve: {
extensions: ['.js', '.css'],
},
plugins: [
new WriteFilePlugin(),
new ExtractCssChunks({
filename: '[name].css',
chunkFilename: '[name].css',
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin(defineEnv),
],
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /node_modules/,
chunks: 'initial',
name: 'vendor',
enforce: true,
},
},
},
},
};

```

Here is server.dev.js config file
```
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const defineEnvironment = require('./dotenv');

const res = p => path.resolve(__dirname, p);
const devMode = process.env.NODE_ENV !== 'production';

// if you're specifying externals to leave unbundled, you need to tell Webpack
// to still bundle `react-universal-component`, `webpack-flush-chunks` and
// `require-universal-module` so that they know they are running
// within Webpack and can properly make connections to client modules:
const externals = fs
.readdirSync(res('../node_modules'))
.filter(
x => !/\.bin|react-universal-component|require-universal-module|webpack-flush-chunks/.test(x),
)
.reduce((ext, mod) => {
ext[mod] = `commonjs ${mod}`; // eslint-disable-line no-param-reassign
return ext;
}, {});

module.exports = {
mode: devMode ? 'development' : 'production',
name: 'server',
target: 'node',
devtool: 'source-map',
entry: ['babel-polyfill', 'fetch-everywhere', res('../server/render.js')],
externals,
output: {
path: res('../buildServer'),
filename: '[name].js',
libraryTarget: 'commonjs2',
publicPath: '/static/',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.(sa|sc|c)ss$/,
exclude: /node_modules/,
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
exportOnlyLocals: true,
localIdentName: '[name]__[local]--[hash:base64:5]',
},
},
},
],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
},
],
},
],
},
resolve: {
extensions: ['.js', '.css'],
},
plugins: [
new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
new webpack.DefinePlugin(defineEnvironment),
],
};
```

I hope you guys can help me with that.

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.