webpack 5 output path error
AuthorProxy opened this issue · comments
Issue description or question
After updating to webppack5 asks for output path: [webpack-cli] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
Webpack Config
/* eslint-env node */
/* eslint-disable import/first */
require('@babel/register')({
presets: ['@babel/preset-env']
});
import path from 'path';
import dotenv from 'dotenv';
import webpack from 'webpack';
// import DotenvWebpackPlugin from 'dotenv-webpack';
import CircularDependencyPlugin from 'circular-dependency-plugin';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import HtmlWebPackPlugin from 'html-webpack-plugin';
import FaviconsWebpackPlugin from 'favicons-webpack-plugin';
import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin';
import { WindowsBalloon } from 'node-notifier';
import UnusedWebpackPlugin from 'unused-webpack-plugin';
import ESLintPlugin from 'eslint-webpack-plugin';
import ManifestPlugin from 'webpack-manifest-plugin';
// import { BundleStatsWebpackPlugin } from 'bundle-stats-webpack-plugin';
// import { StatsWriterPlugin } from 'webpack-stats-plugin';
// import glob from 'glob';
// import ExtractCssChunks from 'extract-css-chunks-webpack-plugin';
// import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
// import PurgecssPlugin from 'purgecss-webpack-plugin';
// import SpeedMeasurePlugin from 'speed-measure-webpack-plugin';
import { getWebpackDevServerOptions } from './configs';
// const isDev = process.env.NODE_ENV !== 'production';
const PATHS = {
src: path.resolve(__dirname, 'src'),
images: path.resolve(__dirname, 'src/assets/images'),
fonts: path.resolve(__dirname, 'src/assets/fonts'),
pdfs: path.resolve(__dirname, 'src/assets/pdf')
};
const styleLoader = {
loader: 'style-loader',
options: {
insert: 'head',
injectType: 'singletonStyleTag'
}
};
// TODO: ExtractCssChunks
// const extractCssChunksLoader = {
// loader: ExtractCssChunks.loader,
// options: {
// hmr: isDev
// }
// };
// const moduleExtractCssChunksLoader = {
// loader: ExtractCssChunks.loader,
// options: {
// // esModule: true
// ...extractCssChunksLoader.options,
// }
// };
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: true
}
};
const moduleCssLoader = {
loader: 'css-loader',
options: {
// esModule: true,
...cssLoader.options,
modules: true,
importLoaders: 1
}
};
const config = {
mode: 'development',
devtool: 'source-map',
entry: {
main: `${PATHS.src}/index.js`,
icons: `${PATHS.src}/components/iconControls.js`
},
output: {
// TODO: temp for clean webpack plugin and webpack 5
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash:8].js',
chunkFilename: '[name].[chunkhash:8].js'
},
resolve: {
mainFields: ['browser', 'main', 'module'],
alias: {
'react-dom': '@hot-loader/react-dom'
}
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader', {
loader: 'stylelint-custom-processor-loader',
options: {
emitWarning: true
}
}]
}, {
test: /\.css$/,
include: /\.module\.css$/,
use: [styleLoader, /* moduleExtractCssChunksLoader, */ moduleCssLoader]
}, {
test: /\.css$/,
exclude: /\.module\.css$/,
use: [styleLoader, /* extractCssChunksLoader, */ cssLoader]
}, {
test: /\.(svg|eot|ttf|otf|woff|woff2)$/,
include: PATHS.fonts,
type: 'asset/resource',
generator: {
filename: 'assets/fonts/[name][ext]'
}
}, {
test: /\.pdf$/,
include: PATHS.pdfs,
type: 'asset/resource',
generator: {
filename: 'assets/pdf/[name][ext]'
}
}, {
test: /\.(png|gif|jpg|jpeg)$/,
include: PATHS.images,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 20 * 1024
}
},
generator: {
filename: 'assets/images/[name][ext]'
}
}, {
test: /\.txt$/,
type: 'asset/source'
}, {
test: /\.svg$/,
include: PATHS.images,
use: 'svg-react-loader'
}]
},
optimization: {
runtimeChunk: {
name: 'manifest'
},
splitChunks: {
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
// TODO: ExtractCssChunks
// styles: {
// test: /\.css$/,
// name: 'styles',
// chunks: 'all',
// enforce: true
// }
}
// name: true // TODO: move to webpack 5
}
// TODO: split node modules
// splitChunks: {
// chunks: 'all',
// maxInitialRequests: Infinity,
// minSize: 0,
// cacheGroups: {
// common: {
// name: 'common',
// minChunks: 2,
// chunks: 'all',
// reuseExistingChunk: true,
// enforce: true,
// priority: 10
// },
// vendors: {
// test: /[\\/]node_modules[\\/]/,
// name(module) {
// const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
// return `npm.${packageName.replace('@', '_')}`;
// },
// priority: 20
// }
// }
// }
},
plugins: [
new ESLintPlugin(),
// new webpack.optimize.AggressiveMergingPlugin(),
// TODO: wait until will be fixed
// new DotenvWebpackPlugin({ systemvars: true }),
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.config().parsed)
}),
new CircularDependencyPlugin({
failOnError: false,
exclude: /node_modules/,
cwd: PATHS.src
}),
new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
new HtmlWebPackPlugin({ template: './src/index.html' }),
new FaviconsWebpackPlugin({
logo: './src/assets/images/favicon.png',
favicons: {
appShortName: 'hrk',
icons: {
android: true,
appleIcon: true,
appleStartup: true,
coast: true,
favicons: true,
firefox: true,
windows: true,
yandex: true
}
}
}),
// new ExtractCssChunks({
// filename: '[name].[contenthash].css',
// chunkFilename: '[id].[contenthash].css'
// }),
// new PurgecssPlugin({
// paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
// }),
new FriendlyErrorsWebpackPlugin({
compilationSuccessInfo: {
messages: ['You application is running here http://localhost:3000'],
notes: ['Some additionnal notes to be displayed unpon successful compilation']
},
onErrors: (severity, errors) => {
if (severity !== 'error') {
return;
}
const error = errors[0];
new WindowsBalloon().notify({
title: 'Webpack compilation error',
message: `${severity}: ${error.name}`,
subtitle: error.file || ''
});
},
clearConsole: false
}),
new UnusedWebpackPlugin({
directories: [PATHS.src],
exclude: [
'*.spec.js',
'*.mocks.js',
'adapters/**/*.js',
'utils/testUtils.js',
'assets/images/loaders/**/*.*'
]
}),
new ManifestPlugin({
fileName: 'manifest.mappings.js',
writeToFileEmit: true
})
// TODO: migrate to webpack5
// new BundleStatsWebpackPlugin({ baseline: true }),
// new StatsWriterPlugin({ stats: { all: true } })
]
};
module.exports = env => {
process.env.BABEL_ENV ||= env;
if (env && env.cli) {
global.console.log(`Running cli webpack-dev-server: ${JSON.stringify(env || 'not specified')}`);
config.devServer = getWebpackDevServerOptions();
config.devtool = 'cheap-source-map';
}
// TODO: try in webpack5, previously was [hash] error
// const smp = new SpeedMeasurePlugin();
const smp = null;
return smp ? smp.wrap(config) : config;
};
Environment
Run: npx envinfo --system --binaries --npmPackages clean-webpack-plugin,webpack
System:
OS: Windows 10 10.0.19041
CPU: (6) x64 Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz
Memory: 3.01 GB / 31.84 GB
Binaries:
Node: 12.18.4 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
npmPackages:
clean-webpack-plugin: ^3.0.0 => 3.0.0
webpack: ^5.3.2 => 5.3.2
FWIW, I'm 99% sure this is a dotenv error, if that helps any. I'm afraid I don't have a solution, yet.
@AuthorProxy Get rid of the dotenv code in the plugins section and add this at the top
import Dotenv from 'dotenv';
Dotenv.config()