laravel-mix-polyfill require statements not handled by babel

Question

I'm having issues with the laravel-mix-polyfill package inserting require statements for all core-js packages needed according to my browserlist, but they are not handled by babel, and show up in the compiled es5 code, throwing errors in the browser.

The compiled code looks like the following:

"use strict";

require("core-js/modules/es.symbol");

// a lot more requires omitted...

require("core-js/modules/web.url.to-json");

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

/******/
(function (modules) {
  // webpackBootstrap

// etc...

This throws the following error in the browser:

coffeescript:3 Uncaught ReferenceError: require is not defined

It feels like things are happening in the wrong order, since babel has no issue handling both import and require statements in my code, but the inserted require statements (that according to the babel docs should be inserted as imports, not sure if that is relevant though) are ignored by babel when transpiling.

Steps To Reproduce:

Laravel Mix Version: 4.1.4
Node Version: v12.10.0
NPM Version: 6.10.3
OS: macOS Mojave 10.14.6 (18G84)

package.json

{
  "name": "laravel-mix-test",
  "version": "1.0.0",
  "scripts": {
    "dev": "yarn run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "yarn run development --watch",
    "prod": "yarn run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/plugin-transform-runtime": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "babel-loader": "^8.0.6",
    "core-js": "^3.2.1",
    "cross-env": "^5.2.1",
    "css-loader": "^3.2.0",
    "laravel-mix": "^4.1.4",
    "laravel-mix-polyfill": "^1.1.0",
    "sass": "^1.22.12",
    "sass-loader": "^7.3.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.9"
  }
}

webpack.mix.js

let mix = require('laravel-mix');

require('laravel-mix-polyfill');

mix.options({
        processCssUrls: false,
        uglify: false
    })
    .polyfill({
        enabled: true,
        useBuiltIns: "usage",
        targets: "> 0.05%, not ie < 10, safari >= 8",
        corejs: 3
    })
    .js('src/js/app.js', 'public/js/app.js')
    .babel('public/js/app.js', 'public/js/app.js')
    .sass('src/scss/style.scss', 'public/css/style.css')
    .copyDirectory('src/fonts', 'public/fonts')
    .copyDirectory('src/images', 'public/images')
    .disableNotifications();

Has anyone else experienced this issue?

Any help is greatly appreciated!

laravel-mix-polyfill require statements not handled by babel

Steps To Reproduce:

Answers (1)

Related Questions