Module import seems not working with Webpack 5

[RichForever]

Hi, I'm struggling with adding alpinejs to my current WP setup. So I'm using Webpack 5. My config file looks like this

`
const path = require("path");
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const WebpackAssetsManifest = require("webpack-assets-manifest");
// const TerserPlugin = require('terser-webpack-plugin');
const { EsbuildPlugin } = require('esbuild-loader')
const ProgressPlugin = require('progress-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const isProduction = process.env.NODE_ENV == "production";

const config = {
src: {
main: './theme/src/',
scripts: './theme/src/js/',
styles: './theme/src/scss/',
images: './theme/src/images',
fonts: './theme/src/fonts',
},
dist: {
main: './theme/dist/',
images: '',
fonts: '',
}
}

module.exports = {
mode: isProduction ? "production" : "development",
entry: {
"scripts": config.src.scripts + "app.js",
"blocks": config.src.scripts + "blocks.js",
"twig": config.src.scripts + "twig.js",
"styles": config.src.styles + "app.scss",
"theme": config.src.styles + "theme.scss",
"editor": config.src.styles + "editor-styles.scss",
},
output: {
path: path.resolve(__dirname, config.dist.main),
filename: isProduction ? "[name].[chunkhash:8].js" : "[name].js",
chunkFilename: isProduction ? "[name].[chunkhash:8].js" : "[name].js",
clean: true,
},
devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',
plugins: [
new ProgressPlugin(),
new RemoveEmptyScriptsPlugin(),
new WebpackAssetsManifest({
output: path.resolve(__dirname, config.dist.main + "manifest.json"),
customize(entry, original, manifest, asset) {
const pattern = /.(js|css)$/i;
if (!pattern.test(entry.key)) {
return false;
}
},
}),
new MiniCssExtractPlugin({
filename: isProduction ? "[name].[chunkhash:8].css" : "[name].css",
chunkFilename: isProduction ? "[name].[chunkhash:8].css" : "[name].css",
}),
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
proxy: 'http://dev.site',
files: [
"./theme//*.twig",
"./theme//.php",
"./theme/**/.scss",
"./theme//*.css",
"./theme//*.js"
]
})
],
module: {
rules: [
{
test: /.(js|jsx)$/i,
loader: 'esbuild-loader',
},
{
test: /.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
],
},
{
test: /.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
},
{
test: /.(jpe?g|png|gif|svg)$/i,
type: "asset/resource",
generator: {
filename: "images/[name][ext]",
},
},
{
test: /.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
generator: {
filename: "fonts/[name][ext]",
},
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
resolve: {
alias: {
images: path.join(__dirname, config.src.images),
fonts: path.join(__dirname, config.src.fonts),
blocks: path.join(__dirname, 'theme/blocks')
},
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: "vendors",
chunks: "all",
},
},
},
minimizer: [
"...",
new CssMinimizerPlugin(),
new ImageMinimizerPlugin({
severityError: "warning",
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
plugins: [
"imagemin-gifsicle",
"imagemin-mozjpeg",
"imagemin-pngquant",
"imagemin-svgo",
],
},
},
}),
new EsbuildPlugin(),
// new TerserPlugin({
// extractComments: false,
// terserOptions: {
// format: {
// comments: false,
// },
// },
// }),
],
},
};`

After compiling my js which have standard alpine include as module, alpine don't work. Even simple examples from website. <script> version is working right. So, my question is how to get it work? Maybe there's some bugs with my webpack config? Many thanks!

[ekwoka]

wow, I hate webpack.

Whats your actual Alpine code look like?

[RichForever]

Even simple <button @click="alert('Hello World!')">Say Hi</button> don't work. I noticed when I add these 3 lines
import Alpine from 'alpinejs' window.Alpine = Alpine Alpine.start()

all my js didn't work. Also, I tried to add defer tag to my script tag. It doesn't help too. Next step was adding console.log for each line (import, window and alpine start) but it doesn't work either. I can't see any console logs.

@edit to be honest adding import Alpine from 'alpinejs' breaking my code. It interesting.

[ekwoka]

This seems like something wrong with your environment.

If the code isn't even running in the browser at all with no errors.

One tip: don't use webpack, or any cjs

But if you really must, you'll need to figure out why it doesn't seem to be bundling the file at all...

[RichForever]

I tried even on fresh webpack env and it didnt works. Even better, with laravel mix which is similar to webpack (i think) its working. I think I’ll go with classic cdn import instead of module

[ekwoka]

Then there is something wrong with your settings.

[RichForever]

I mean to write didnt. My mistake. So its something with webpack. I’ll investigate anyway

[RichForever]

Finally I got it work. In the webpack config file I have splitChunks section. I had to change vendor test rule
from this
test: /[\\/]node_modules[\\/]/,
to this
test: /[\\/]node_modules[\\/](?!alpinejs)/,

now it's working :)