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

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://git@myServer.com: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?

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 10
Comments: 15 (1 by maintainers)

Most upvoted comments

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()
                }]
            }]
        }
    });
}

+39

OwenMelbz on Aug 14, 2017

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.

domstubbs on Jul 11, 2017

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.

JeffreyWay on Jul 14, 2017

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

Daedalus11069 on Aug 21, 2017

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)

thecrypticace on Jul 13, 2017