CODEWITHSUNDEEP
webpackecmascript-6ecmascript-5laravel-mix
Raphael Marco
Raphael Marco

Reputation: 494

Laravel Mix not transpiling vendor.js to es5

Laravel Mix does not seem to transpile vendor.js and manifest.js to ES5. It fails on iPhone Safari and IE 11.

IE DevTools shows these errors:

IE error

And it appears that it still has ES6 features:

es6

The other files seem to transpile such as app.js and the chunks.

Here's my webpack.mix.js

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

let options = {
  processCssUrls: false,
}

let config = {
  output: {
    chunkFilename: 'assets/js/chunks/[name].js',
    publicPath: '/'
  }
}

if (mix.inProduction()) {
  config.output.chunkFilename = 'assets/js/chunks/[name].[chunkhash].js'
}

mix
  .js('resources/assets/js/app.js', 'public/assets/js')

  .sass('resources/assets/sass/web.scss', 'public/assets/css')
  .sass('resources/assets/sass/fonts.scss', 'public/assets/css')

  .copy('resources/assets/img', 'public/assets/img')
  .copy('node_modules/@fortawesome/fontawesome-free/webfonts','public/assets/webfonts')

  .extract([
      // Libraries...
  ])

  .disableNotifications()
  .webpackConfig(config)
  .options(options)
  .sourceMaps()

if (mix.inProduction()) {
  mix.version()
}

And my .babelrc

{
  "plugins": ["syntax-dynamic-import"]
}

I tried the following:

  1. Install babel-preset-es2015 and add es2015 to my .babelrc presets.
  2. Add .babel('[...]/vendor.js', '[...]/vendor.es5.js') to my webpack.mix.js

How can I get the vendor.js and manifest.js file to transpile to ES5? Or at least get it working with IE 11 and iPhone Safari.

Upvotes: 2

Views: 1093

Answers (1)

mike.bronner
mike.bronner

Reputation: 1249

After some research it became clear that Laravel Mix 4.x does not transpile included packages. To achieve this, add the following to your webpack.mix.js file, prior to your mix commands:

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(bower_components)/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: Config.babel()
                    }
                ]
            }
        ]
    }
});

This overrides the default configuration, which excludes node_modules from bring transpiled.

Upvotes: 1

Related Questions