Laravel-mix: Babel not transpiling node_modules

[Livijn]

I am trying to enable support for IE 11 in my application. However, some of my dependencies haven't transpiled the code to es5. Therefor, I tried added one of them to my rules, but it still doesn't transpile that dependency.

This is how I am including my dependency, this time being vue2-google-maps. However the produced code still contains Object.entries after running npm run dev.

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /node_modules\/(vue2-google-maps)\/.+\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: mix.config.babel()
                    }
                ]
            }
        ]
    }
});

mix.js('resources/js/app.js', 'public/js')
    .extract()
    .babel(['public/js/manifest.js'], 'public/js/manifest.es5.js')
    .babel(['public/js/vendor.js'], 'public/js/vendor.es5.js')
    .babel(['public/js/app.js'], 'public/js/app.es5.js')

Here is a similar question, but the answer didn't help me yet. Here is another similar question, but there is no answer in that one.

Here is my .babelrc:

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

What am I doing wrong? Why is not the dependency also transpiled?

[lpreterite]

I have the same problem, I guess the reason for the problem comes from babel7

https://github.com/webpack/webpack/issues/2031#issuecomment-419614813

When I replace .babelrc with babel.config.js, the problem is still not solved.

Until the babel configuration is set in the rules

        module: {
            rules: [
                {
                    test: /\.js?$/,
                    include: [
                        path.resolve('node_modules/vpin')
                    ],
                    loader: "babel-loader",
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    useBuiltIns: "usage",
                                    forceAllTransforms: true
                                }
                            ]
                        ]
                    }
                }
            ]
        },

[bigperson]

I have some problem

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Livijn]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

bump

[adriandmitroca]

Have you found a solution for this by any chance?

@Livijn @bigperson

[hackel]

babel-loader is configured by default to exclude node_modules. This is how I solved this issue to allow transpiling bootstrap-vue. You can customize the regex as needed, or might be able to just set it to null.

mix.override(webpackConfig => {
    webpackConfig.module.rules
        .find(rule => rule.test && rule.test.source === '\\.jsx?$')
        .exclude = /node_modules\/(?!bootstrap-vue\/src\/)/
});

[jonleopard]

I don't think this works anymore. The snippet below returns:

TypeError: Cannot set property 'exclude' of undefined

mix.override(webpackConfig => {
    webpackConfig.module.rules.find(
        rule => rule.test && rule.test.source === "\\.js?$"
    ).exclude = /node_modules\/(?!(@softvisio))/;
});

Any ideas?

[J-T-McC]

I don't think this works anymore. The snippet below returns:

TypeError: Cannot set property 'exclude' of undefined

mix.override(webpackConfig => {
    webpackConfig.module.rules.find(
        rule => rule.test && rule.test.source === "\\.js?$"
    ).exclude = /node_modules\/(?!(@softvisio))/;
});

Any ideas?

@jonleopard were you ever able to find a solution? I am also encountering this issue

[jaydensmith]

@jonleopard @J-T-McC try this:

mix.override(webpackConfig => {
    webpackConfig.module.rules
        .find(rule => rule.test && rule.test.toString() === /\.(js|vue)$/.toString())
        .exclude = /node_modules\/(?!(@softvisio))/;
});

[daun]

After solving the problem locally, I decided to wrap the solution into a Mix extension.

In case someone wants to give it a try: Laravel Mix Transpile Node Modules

// Transpile all node_modules dependencies
mix.transpileNodeModules()

// Transpile selected dependencies
mix.transpileNodeModules(['swiper', 'dom7'])