Webpack jsonp chunk collision - add "name" attribute top package.json

[davidwebca]

• I've read the guidelines for Contributing to Roots Projects
• This request isn't a duplicate of an existing issue
• I've read the docs and followed them (if applicable)
• This is not a personal support request that should be posted on the Roots Discourse community

Description

Hi! I was having issues lately with my websites developed with Sage as the starter theme and some extensions (namely @Log1x 's acf-phone-number) and it was pretty weird and random. Didn't happen with all my projects, wasn't sure what was happening.

Well, it so happens that Webpack 5 released a new mecanism to make the output jsonP function unique globally by using the package's name attribute. (https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-unique-naming).

Right now, Sage doesn't have a default "name" attribute in its package.json, probably because the reasoning was that it's almost always a private package anyway. But, it would remove some conflicts with some other plugins and librairies compiled with laravel mix to make sure that there's a name in the package.json.

It could simply be "sage" since it would be very unlikely that someone else has another package compiled with the name "sage", but it could also be interactively asked to the user during install or something like that.

Steps to reproduce

1. Compile an external library, for example inside a plugin, with similar settings and no name in package.json that generates a manifest.js file
2. Enqueue JS files in the plugin while using Sage as a theme
3. Notice conflict between names (with very obscured obfucscated and minified names, super hard to identify the issue)

Expected behavior:
No JavaScript conflict should happen when compiling something else with laravel-mix.

Actual behavior:
A function name conflict will happen because of the way JSONP callback functions are generated in code splitting setups (extract() -> manifest.js) and without package.json's name attribute.

Reproduces how often:
I can reproduce it 100% of the time right now on my project since I use a similar setup to compile the code in a WordPress plugin I'm using inside my project.

Versions

Sage 10.0.0-beta.1

Running on Mac OS Big Sur, PHP 7.4 through mamp

Notes

I can provide code examples if needed, it's just about adding a "name" attribute to package.json to help webpack generate uniquely named functions. Available to help if needed! 🔥