Error: [universal-webpack] Your server source file must export a function. Got [ 'libserver' ]

[Yousef]

when I added runtimeChunk to the optimization Obj or splitChunks{..} it throw this error

this is my webpack config:
`import path from 'path';
import webpack from 'webpack';
import WebpackNotifierPlugin from 'webpack-notifier';
import webpackMerge from 'webpack-merge';
import CleanWebpackPlugin from 'clean-webpack-plugin';
import headerFooterManifestJSON from '@wehkamp/blaze-lib-headerfooter-components/lib/manifest.json';
import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin';
import CompressionPlugin from 'compression-webpack-plugin';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin';
import SpeedMeasurePlugin from 'speed-measure-webpack-plugin';

process.noDeprecation = true;

const target = process.env.npm_lifecycle_event;
const development = process.env.NODE_ENV === 'development';
const smp = new SpeedMeasurePlugin();

const commonConfig = webpackMerge([{
devtool: 'cheap-module-source-map',
mode: development ? 'development' : 'production',
entry: path.resolve(_dirname, '..', 'src', 'app', 'index'),
context: path.resolve(dirname, '..'),
output: {
path: path.resolve(dirname, '..', 'dist', 'public'),
filename: '[name].[hash:8].js',
libraryTarget: 'umd',
},
stats: {
chunkGroups: true,
chunks: true,
},
module: {
rules: [{
test: /wehkamp/ui-/,
loader: 'babel-loader',
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
cacheDirectory: true,
},
},
{
test: /.(ttf|eot|svg|woff(2)?)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[hash:8].[ext]',
},
}],
},
{
test: /.(jpe?g|png|gif)$/i,
use: [{
loader: 'url-loader',
options: {
limit: 4096,
name: '[name].[hash:8].[ext]',
},
}],
},
{
test: /.(graphqls?|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader',
},
{
test: /.(css|scss)$/,
use: [{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name][local][hash:base64:5]',
discardComments: true,
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
outputStyle: 'compressed',
sourceMap: true,
},
},
],
},
],
},
plugins: [
new webpack.ProgressPlugin(),
new WebpackNotifierPlugin(),
new webpack.DefinePlugin({
webpackVars: {
headerFooterManifest: JSON.stringify(headerFooterManifestJSON),
},
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash:8].css',
chunkFilename: '[id].[hash:8].css',
}),
new webpack.ContextReplacementPlugin(
/graphql-language-service-interface[\/]dist$/,
new RegExp('^\./.\.js$'),
),
],
optimization: {
runtimeChunk: 'single',
namedModules: true,
noEmitOnErrors: true,
splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
minimizer: [
new UglifyJsPlugin({
sourceMap: true,
cache: true,
parallel: true,
uglifyOptions: {
compress: {
warnings: false,
},
output: {
comments: false,
},
},
}),
],
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
}]);

if (target === 'bundle') {
commonConfig.plugins.push(
new BundleAnalyzerPlugin({
analyzerPort: 7777,
}),
);
}

const productionConfig = webpackMerge([{
plugins: [
new CleanWebpackPlugin(['dist']),
new CompressionPlugin(),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false,
options: {
context: path.resolve(__dirname, '..'),
babel: {
babelrc: true,
},
},
}),
],
optimization: {
minimizer: [
new OptimizeCSSAssetsPlugin({}),
],
},
}]);

const developmentConfig = webpackMerge([{
plugins: [
new FriendlyErrorsWebpackPlugin(),
],
}]);

const config = development ? developmentConfig : productionConfig;
const mergeConfig = webpackMerge(commonConfig, config);

const configuration = smp.wrap(mergeConfig);
// const configuration = smp.wrap(webpackMerge(...commonConfig, ...config));

export default configuration;`

[Yousef]

I think when I add this to my webpack.config it'll use it when target: 'node' and that's why I got
exports.ids = ['libserver'];
exports.modules = [...]

[Yousef]

the fix is that the splitChunks part should be placed in the cleint.config

[Nikolay]

@Yallaban What if you leave splitChunks in the main config and then delete it from server config instead?
https://webpack.js.org/plugins/split-chunks-plugin/
Perhaps serverConfiguration() should delete configuration.optimization.splitChunks if (configuration.optimization.splitChunks).

[Yousef Allaban]

@catamphetamine that what I did in the first place but It will still give error it'll not delete it at all
special keyword to do that?

I have another Q if you could help out with. I'm trying to implement the Dllplgin but I stuck with that, could you please given a hint or example that made with universal-webpack.

what i did is create new file and add this to it

const webpack = require('webpack');

const outputPath = path.resolve(__dirname, '..', 'dist', 'public');
module.exports = {
  context: process.cwd(),
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.less', '.css'],
    modules: [__dirname, 'node_modules'],
  },

  entry: {
    ReactStuff: [
      'react',
      'react-dom',
      'react-router',
      'redux',
      'react-redux',
    ],
  },
  output: {
    filename: '[name].dll.js',
    path: outputPath,
    library: '[name]',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.join(outputPath, '[name].json'),
    }),
  ],
}```

and added the `DllReferencePlugin` to `webpack.config.js` like this.
```new webpack.DllReferencePlugin({
      context: process.cwd(),
      manifest: require(path.join(outputPath, 'ReactStuff.json')),
    })```

but it doesn't build
`Error: Cannot find module '/Users/yousefallaban/Documents/work/Wehkamp/checkout-site/blaze-one-page-checkout-site-nl.wehkamp/dist/public/ReactStuff.json`

[Nikolay]

@yousefallaban

that what I did in the first place but It will still give error

I see. Ok.

I have another Q if you could help out with. I'm trying to implement the Dllplgin but I stuck with that, could you please given a hint or example that made with universal-webpack.

I didn't use DllPlugin.

[Yousef Allaban]

@catamphetamine
Ok, but it's possible to use it with universal-webpack. ?

[Nikolay]

@yousefallaban

Ok, but it's possible to use it with universal-webpack. ?

Won't able to tell you that.
I only tested universal-webpack with generic cases.
Your case seems to be a complex one.