Reputation: 494
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:
And it appears that it still has ES6 features:
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:
babel-preset-es2015
and add es2015
to my .babelrc
presets..babel('[...]/vendor.js', '[...]/vendor.es5.js')
to my webpack.mix.jsHow 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
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