faceyspacey / faceyspacey/webpack-flush-chunks
[FLUSH CHUNKS]: Unable to find pages-Landing in Webpack chunks. Please check usage of Babel plugin.
- 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.