Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

PaulMarshall's avatar

Getting Mix to compile node_modules file

We're using https://github.com/RobinCK/vue-popper via npm install vue-popperjs --save & import Popper from 'vue-popperjs'; Vue.component('popper',Popper);

This works fine except the dist versions of js that it pulls in uses const instead of var and this breaks on iOS9 Safari which is a key browser for our users.

I'm trying to create something in the webpack that before it gets included in the app.js, the node_modules/vue-popperjs/dist/vue-popper.js gets transpiled over the top of node_modules/vue-popperjs/dist/vue-popper.min.js

I've tried literally everything to get this to work, sometimes it's fine with npm run dev, but then npm run watch gets stuck in a loop and production won't run at all.

Can anyone help? Thanks

Edit: We're deploying a Laravel app via Vapor so I can't modify it locally as it pulls the dependencies each time fresh.

0 likes
8 replies
BryanK's avatar

Instead of trying to manipulate which file is pulled in, why don't you use polyfill?

Try installing and compiling with this polyfill package which makes it easy to use with mix: laravel-mix-polyfill

in webpack.mix.js, set target per browserslist:

require('laravel-mix-polyfill');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .polyfill({
      enabled: true,
      useBuiltIns: "usage",
      targets: {"ios_saf": 9} // you can add other browsers here as well
   });
PaulMarshall's avatar

Hi Bryan, thanks for the quick response, will that pick up the const's that have made it into the app.js and convert then?

Thanks

BryanK's avatar

Yes.

const something = 'whatever';

will be changed to:

var something = 'whatever';
PaulMarshall's avatar

Sorry Bryan I get Invalid Option: 'ios_saf' is not a valid target

PaulMarshall's avatar

Thank Bryan that compiled but it's still retaining the const's so I'll just exclude the package for now till I can find a workaround

BryanK's avatar

oh i think node_modules is excluded by default.

try this:

mix.webpackConfig({
        module: {
            rules: [{
                test: /\.(js|jsx)$/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }, ],
                include: /node_modules\/vue-popperjs/,
            }, ],
        }
    })
PaulMarshall's avatar

Thanks for your extended support Bryan, it is appreciated. Must be something going awry somewhere as it still has the issue. I think we'll switch to vue popover and try that.

Please or to participate in this conversation.