I was seeing the same issue @cmo. I just updated the rest of my node packages (including webpack to v5) and itās come good. Iām not sure which of the deps needed updating, but my updated package.json looks like this:
{
"repository": {},
"description": " ",
"license": "MIT",
"engines": {
"node": ">= 14.16.1"
},
"scripts": {
"deploy": "NODE_ENV=production webpack --mode=production",
"dev": "webpack --mode=development",
"watch": "NODE_ENV=development webpack --mode=development --watch"
},
"dependencies": {
"@tailwindcss/forms": "^0.3.3",
"alpinejs": "^3.0.6",
"autoprefixer": "^10.2.6",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view",
"postcss": "^8.3.4",
"tailwindcss": "^2.1.4",
"topbar": "^1.0.1"
},
"devDependencies": {
"@babel/core": "^7.14.0",
"@babel/preset-env": "^7.14.0",
"babel-loader": "^8.2.2",
"copy-webpack-plugin": "^8.1.1",
"css-loader": "^5.2.0",
"css-minimizer-webpack-plugin": "^1.3.0",
"glob": "^7.1.7",
"mini-css-extract-plugin": "^1.5.0",
"postcss-loader": "^4.3.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"webpack": "5.36.0",
"webpack-cli": "^4.6.0"
}
}
and webpack.config.js:
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = (env, options) => {
const devMode = options.mode !== 'production';
return {
entry: {
'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
},
output: {
path: path.resolve(__dirname, '../priv/static/js'),
filename: '[name].js',
publicPath: '/js/'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.[s]?css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
],
},
{
test: /\.svg$/i,
type: 'asset/inline'
},
{
test: /\.(png|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
]
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin({
patterns: [
{ from: 'static/', to: '../' }
]
})
],
mode: options.mode || 'production',
optimization: {
minimizer: [
'...',
new CssMinimizerPlugin()
]
},
target: 'node14.16',
devtool: devMode ? 'source-map' : undefined
}
};
All of which i borrowed from Use Webpack v5.x for asset bundling by acconrad Ā· Pull Request #4310 Ā· phoenixframework/phoenix Ā· GitHub