Laravel-mix: Laravel Mix doesn't seem to transpile ES6 when importing packages

[lucidlemon]

• Laravel Mix Version: 1.0.7
• Node Version: 8.1.3
• NPM Version: 5.1.0
• OS: macOS 10.12.6 Beta

Description:

Laravel Mix doesn't seem to transpile ES6 when importing packages

Steps To Reproduce:

Installed laravel mix according to documentation for a standalone project.

created the standard directory structure (src/app.js, src/app.scss, created a folder dist) and added a custom file as myPackage.js.

src/app.js now contains the following:

import { initTabSwitcher } from './myPackage.js';

initTabSwitcher('.tabs a');

Running npm run dev and npm run production works fine now.

To the Problem

If i put myPackage.js into my own git repository (as I want to share the functions across projects), install it via npm ("myPackage": "git+ssh://[email protected]:myUser/myPackage.git") and import it this way:

import { initTabSwitcher } from 'myPackage';

initTabSwitcher('.tabs a');

I get this error upon running npm run production:

Unexpected token: name (matchesFn) [./~/myPackage/src/app.js:3,0][/app.js:97,6]

npm run dev runs absolutely fine, but does not minify anything.

I also tried installing uglifyJS by adding "uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony" into my devDependencies. It didn't change anything.

Is Laravel Mix not applying transpilation to imported modules? Am I doing something wrong or is this a bug?

[Juje]

I can confirm this problem.

When I imported the Bootstrap dropdown module everything worked perfectly when using npm run dev but when I tried running npm run prod I got the following error:

js/app.js from UglifyJs
Unexpected token: operator (>) [./~/bootstrap/js/src/dropdown.js:11,0][js/app.js:20252,23]

And on that line the following JS can be seen:

const Dropdown = (($) => {

So I can confirm that ES6 is giving some issues with the Uglify system.

[domstubbs]

The default Babel rules exclude the node_modules directory.

I’ve posted a sample config override here which has sorted this for me. I’m still excluding node_modules in general, my only exception is the foundation-sites package, which currently requires transpiling.

[Juje]

@domstubbs Sadly the code you posted in that link doesn't work for me :( .
But there is an Uglify-ES edition and this seems to work perfectly if you include the beta version of WebPack-UglifyJS-Plugin.
So I guess we just have to wait till WebPack-UglifyJS-Plugin releases the stable version so LaravelMix will have it too.
But I'm happy that the solution you posted works for some.

[domstubbs]

@Juje I assumed that you were running into the same node_modules exclusion issue that I was, since I’d been getting the same errors from UglifyJS, but looking at the path in your error message I think I might’ve jumped the gun there.

If you have code that isn’t being transpiled even though it isn’t in a node_modules or bower_components directory I’m not sure what the cause for that could be. Not that that’s saying much as I’m still trying to figure Webpack out myself.

[JeffreyWay]

Yes, this is 100% because we exclude the node_modules directory. It speeds things up a good bit, as I understand.

But - the question does pop up somewhat frequently, so we need to decide if we should remove that exclusion entirely. Or, I could make it an opt-in config option.

[devcircus]

Opt-in sounds like a win-win.

[thecrypticace]

Agreed. I've got a situation where enabling mix.sourceMaps() breaks some dependencies code in Safari (in a non-production build only — though uglify can't handle the ES6 so production builds break for a diff reason). Transpiling that code makes the problem disappear completely.

The alternative fix for me (that I've done for now) is used webpack's alias support import the precompiled version instead. This was definitely a weird problem to track down.

Would it be worth making the opt-in also capable of specifying an array? (So I could say I want dependencies X, Y, and Z to be transpiled)

[JeffreyWay]

I think the uglify webpack plugin is really close to being tagged, and that should fix this issue. So I'll tag a new Mix release as soon as they make it official.

[OwenMelbz]

@JeffreyWay is there any movement on this? been a month now and the issue seems still present :(

/js/app.js from UglifyJs
Unexpected token: name (googleCharts) [./node_modules/google-charts/googleCharts.js:3,0][/js/app.js:58074,6]

[OwenMelbz]

For anybody else who wants a work around as @domstubbs said you can change the exclusions

Currently this is a fully working webpack.mix.js example that may be useful for people

const { mix } = require('laravel-mix');

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

if (mix.inProduction()) {

    mix.version();

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

[Daedalus11069]

@OwenMelbz As far as I can tell, the uglifyjs-webpack-plugin still hasn't released an updated version, which is when it was said there'd be movement on this.

[rjvim]

Any update on this problem apart from workaround from @OwenMelbz ?

[robbyrice]

The latest version of Laravel Mix (1.6.0) resolves this problem.

[jdriesen]

@robbyrice ....
If I can ask... what exactly has to be done to solve the problem ?
I ran into the same problem, though I'm NOT using Laravel at all...

Thanks in advance for your reply,
Johnny

[robbyrice]

@jdriesen you shouldn't have to do anything special. The latest version of Laravel Mix has switched to a version of uglifyjs that supports minifying es2015 code. Let me know if you are running into a specific problem and I'll see if I can help.