Webpack build "production" and errors

[paallaire]

Hello,

I got these errors when make webpack build "production".

https://cdn.discordapp.com/attachments/539148674282946565/917568455295762432/SPOILER_unknown.png https://cdn.discordapp.com/attachments/539148674282946565/917568700935204864/unknown.png

When "dev" mode is fine.

Anyone i have a idea ?

main.js

import Alpine from 'alpinejs';

import navMobile from './alpine/navMobile';
import modal from './alpine/modal';
import menuSticky from './alpine/menuSticky';

document.addEventListener('alpine:init', () => {
  Alpine.data('navMobile', navMobile);
  Alpine.data('modal', modal);
  Alpine.data('menuSticky', menuSticky);
});

window.Alpine = Alpine;
Alpine.start();

[danddanddand]

You have to set the target of your production build higher. Try es2017 for your target. I'm a fan of https://github.com/privatenumber/esbuild-loader if you want to speed up your build as well.

[paallaire]

Thx for info!

I try to find my problem with babel-preset-env + usebuiltins.

https://babeljs.io/docs/en/babel-preset-env
https://babeljs.io/docs/en/babel-preset-env#usebuiltins

But i got this error :

bundle.js:1 Uncaught ReferenceError: require is not defined

{return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}**require**("core-js/modules/es.reflect.construct.js"),**require**("regenerator-runtime/runtime.js")

the problem seems to be with the require (polyfill ?).

main.js

import 'core-js/stable';
import 'regenerator-runtime/runtime';

import Alpine from 'alpinejs';

import navMobile from './alpine/navMobile';
import modal from './alpine/modal';
import menuSticky from './alpine/menuSticky';

Alpine.data('navMobile', navMobile);
Alpine.data('modal', modal);
Alpine.data('menuSticky', menuSticky);

window.Alpine = Alpine;
Alpine.start();

Gulp task for Javascript

function scripts() {
	return gulp
		.src("assets/src/js/main.js")
		.pipe(
			webpack({
				mode: mode.development() ? "development" : "production",
				watch: true,
				output: {
					filename: "bundle.js"
				}
			})
		)
		.pipe(babel({
			presets: [
				[
					"@babel/preset-env",
					{
						useBuiltIns: "usage",
						corejs: 3.17,
						debug: true,
					}
				]
			]
		}))
		.pipe(mode.development(sourcemaps.init()))
		.pipe(
			uglify().on("error", (uglify) => {
				console.error(uglify.message);
				this.emit("end");
			})
		)
		.pipe(mode.development(sourcemaps.write()))
		.pipe(gulp.dest("assets/dist/js"));
}