As reference, I'm getting the following error:

Unexpected token: punc ())

mix.options({
    uglify: true,
});

Uglify is already turned on by default. Are you pulling in a package that was written in ES6? If not, everything should compile properly I think.

Can you give me a simple script example that won't compile down? I'll test it out.

If you pull an es6 js file from node_modules like

import someName from 'somePackage/src/es6-syntax-file.js';

mix will not apply babel to it.
Correct me if i am wrong.

@JeffreyWay: It's a Bootstrap v4 modules that's written in ES6.
@ankurk91: That's what it looks like.

Setup

git clone https://github.com/tillkruss/laravel-mix-1216
cd laravel-mix-1216
npm install
npm run production

Error

ERROR  Failed to compile with 1 errors                                                                                                                                                      

dist/test.js from UglifyJs
Unexpected token: punc ()) [./node_modules/bootstrap/js/src/util.js:10,0][dist/test.js:10342,15]

Babel loader is set to exclude node_modules
https://github.com/JeffreyWay/laravel-mix/blob/master/src/builder/webpack-rules.js#L11
I think this was to speed up build.

P.S.
You can import from dist folder
https://github.com/twbs/bootstrap/blob/v4-dev/dist/js/bootstrap.js#L3899-L3909

import {Modal} from 'bootstrap/dist/bootstrap.js'

@ankurk91: Importing from dist works, but it seems to import the entire bootstrap.js file, including all modules, not just the ones I imported.

Did you extract bootstrap with

Mix.extract(['bootstrap'])

If so webpack will discard selective import.

If NOT then try
webpack bundle analyser to visualise the modules and their size.

No, I'm trying to import only specific BSv4 modules.

How would I run the bundle analyser and why?

I was suggesting bundle analyzer to get the correct size of each module included.

Here is the link -
https://github.com/th0r/webpack-bundle-analyzer

Here is how to use this in Laravel mix

npm install --save-dev webpack-bundle-analyzer

Then in your webpack.mix.js

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

mix.webpackConfig({
  plugins: [
     new BundleAnalyzerPlugin(),
  ]
});

Then run

npm run prod

Wait for http://127.0.0.1:8888/ to be ready for your browser.
You can remove this package after using.

Thanks. When I'm using import Modal from 'bootstrap/dist/js/bootstrap.js'; the entire bootstrap.js is imported.

From src:

From dist:

Strange,
Don't know what is missing to fulfill tree shaking requirements
https://webpack.js.org/guides/tree-shaking/

@JeffreyWay: Any insights?

According to bs v4 docs we can can selective import like this

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';

may be you should give it a try.
https://getbootstrap.com/docs/4.0/getting-started/webpack/

Yeah just found compiled individual js files,

https://unpkg.com/bootstrap@4.0.0-beta/js/dist/

@ankurk91: Neat, that worked!

import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/dropdown';

mix.webpackConfig({
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            Popper: ['popper.js', 'default'],
            Util: 'exports-loader?Util!bootstrap/js/dist/util',
        }),
    ]
});