Laravel-mix: .babelConfig() no longer working?

[thomas-dm]

• Laravel Mix Version: 4.0.14
• Node Version (node -v): 10.15.0
• NPM Version (npm -v): 6.5.0
• OS: macOS 10.14.2

Hi,

I’m trying to use the .babelConfig() method in my webpack.mix.js file to merge some options with Mix’s standard configuration. I want to do that instead of relying on a .babelrc because I need to be able to easily switch between configurations. For instance, I want to be able to generate a bundle that supports modules and a bundle for legacy browsers.

Using a .babelrc file works like a charm. However, when I try to merge my options with .babelConfig(), Mix keeps its standard Babel configuration.

mix.babelConfig({
      "presets": [
        [
          "@babel/preset-env",
          {
            "useBuiltIns": "entry",
            "targets": {
                "browsers": ["ie >= 10", "> 1%"]
            }
          }
        ]
      ]
    }
)

This, in my webpack.mix.js, doesn’t work.
What am I missing?

Thanks!

[thomas-dm]

I should note that the use of .babelConfig() is not an absolute necessity in my case. If anyone knows of a clean way to compile multiple JS bundles with different Babel configurations using a .babelrc file with Mix, I’m all ears!

[ankurk91]

I wish if laravel mix could support .babelrc.js file.

[cai30304]

you can create .babelrc file in root path
then in your webpack.mix.js add this

mix.js('resources/js/app.js', 'public/js') .babel('public/js/app.js', 'public/js/app.js');

.js() is not use babel , you need use .babel()

[thomas-dm]

I know Mix already handles .babelrc files. That’s what I’ve been using so far to have custom presets. And AFAIK, mix.js() alone _does_ use the Babel config you define in your .babelrc file.

What I’m trying to do now is generate _multiple_ JS bundles with _different_ Babel configurations in a clean way. One way I could think of was using .babelConfig() _instead_ of a .babelrc file, and pass it different arguments based on the bundle I wanted to generate. But whatever options I pass through .babelConfig() do not get merged with Mix’s default configuration like a .babelrc file does.

[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.

[Erutan409]

I can confirm this doesn't seem to be working in 4.0.15. Did something change under the hood for Webpack, maybe?

[keyurshah]

• Laravel Mix Version: 4.0.14
• Node Version (node -v): 10.15.0
• NPM Version (npm -v): 6.5.0
• OS: macOS 10.14.2

Hi,

I’m trying to use the .babelConfig() method in my webpack.mix.js file to merge some options with Mix’s standard configuration. I want to do that instead of relying on a .babelrc because I need to be able to easily switch between configurations. For instance, I want to be able to generate a bundle that supports modules and a bundle for legacy browsers.

Using a .babelrc file works like a charm. However, when I try to merge my options with .babelConfig(), Mix keeps its standard Babel configuration.

mix.babelConfig({
      "presets": [
        [
          "@babel/preset-env",
          {
            "useBuiltIns": "entry",
            "targets": {
                "browsers": ["ie >= 10", "> 1%"]
            }
          }
        ]
      ]
    }
)

This, in my webpack.mix.js, doesn’t work.
What am I missing?

Thanks!

Was anybody able to get the multiple builds to work? I also need the modern and legacy builds

[pelletiermaxime]

babelConfig is working fine for me with the latest version. It took me a while to figure out a way to output the manifest and mix-manifest.json, but I managed to do it by using the publicPath option and then used the second parameter of the mix() helper in laravel to set the public path there.

[mdnurulmomen]

// webpack.mix.js
`mix.webpackConfig(webpack => {
return {
output: {
publicPath: '/',
filename: '[name].js',
chunkFilename: 'js/[name].js',
},
};
});

mix.babelConfig({
plugins: ['@babel/plugin-syntax-dynamic-import'],
});

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');`

// app.js
const router = new VueRouter({ mode : 'history', routes : [ { path: '/home', name: 'admin.home', component: () => import(/* webpackChunkName : "home-component" / './components/admin/HomeComponent.vue') }, { path: '/restaurants', name: 'admin.restaurants.index', component: () => import(/ webpackChunkName : "restaurant-list" */'./components/admin/RestaurantIndexComponent.vue') }, ], });

But Still npm run dev/watch emitting 0.js, 1.js, rather than home-component.js , restaurant-list.js.

Please Help me out.