In case anyone else runs into an issue when you add your new Javascript file to Laravel Mix and nothing works, remember to include manifest.js and vendor.js even if extract() wasn’t included on your new mix.ts() line.

The long version

webpack.mix.js applies some modifiers to all target files. For example I had:

// Existing file, with .extract()
mix.js('resources/js/main.js', 'public/js').vue().extract(['vue'])

// New file, without .extract()
mix.ts('resources/js/newApp.ts', 'public/js').vue()

Then in my views I used:

<script src="{{ mix('js/newApp.js') }}"></script>

But nothing worked. I could see the newApp.js file with some contents that looked decent but no commenting out or console.log spam would fix it.

The fix was to add the manifest and vendor above it:

<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>

<script src="{{ mix('js/newApp.js') }}"></script>

And then my code ran.

Laravel Mix extracts apply across all lines. You can run them standalone even with laravel.mix();.

What I ended up doing

Each JS file I had was dealing with some different dependencies but had some major common ones. For example they both used vue but only one used vue-router.

To solve this I used Mix extract() with its second parameter to specify a destination file:

mix.js('resources/js/main.js', 'public/js').vue()
	.extract(['vue'], 'js/vendor.js')

mix.ts('resources/js/newApp.ts', 'public/js').vue()
	.extract(['vue-router', 'vue-class-component'], 'js/newAppVendor.js')

Then loaded the mix manifest, the shared dependencies, then the specific dependencies (still excluded for better cacheability):

<script src="{{ mix('js/manifest.js') }}" defer></script>
<script src="{{ mix('js/vendor.js') }}" defer></script>
<script src="{{ mix('js/newAppVendor.js') }}" defer></script>
<script src="{{ mix('js/newApp.js') }}" defer></script>

Fin.

Bit of a pain, easy to forget. Wasted half an hour of my time. So I hope this makes its way onto Google and helps someone else.

This can affect Javascript, Typescript, React, Vue, Angular, whatever. Humans mostly.