andyjh07
27
0
Mix

Laravel Mix IE11 Babel Issues

Posted 1 week ago by andyjh07

I'm currently trying to install Laravel Mix inside a WordPress project to handle my asset compilation.

I have my webpack.mix.js file set up as follows:

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

mix.babel("src/js/app.js", "dist/js/app.js")
    .sass("src/scss/style.scss", "dist/css/style.css")
    .sourceMaps()
    .setPublicPath("dist");

I also have a .babelrc set up as follows:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "ie": "11"
                }
            }
        ]
    ]
}

The only code I'm currently using inside app.js is this:

import Vue from "vue";

However, when I go to the page I get the following error:

Uncaught ReferenceError: require is not defined at app.js:3

And file compiled looks like this (the issue apparently lies on the var _vue line):

"use strict";

var _vue = _interopRequireDefault(require("vue"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

I'm really stuck on this issue as I'm unsure what to do. Any ideas appreciated!

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.