Exclude dependencies from non-CDN builds

[jameschensmith]

Summary

Marks packages as "external" for non-CDN builds. Currently, if you install v3.12.0 of alpinejs, you will pull down @vue/reactivity and it's dependency into node_modules while also having it bundled within alpinejs. This PR excludes those dependencies only from the ESM / CJS bundles.

See related discussion / recommendation here.

[ekwoka]

I'm all about this

[joshhanley]

@jameschensmith thanks for the PR! Makes sense to me.

Can you explain why nprogress was moved from the base package.json to packages/navigate/package.json in this PR? Is it related to the external dependency changes?

[jameschensmith]

@jameschensmith thanks for the PR! Makes sense to me.

Can you explain why nprogress was moved from the base package.json to packages/navigate/package.json in this PR? Is it related to the external dependency changes?

@joshhanley, no problem! Yes, it is related to the changes. Because the non-CDN builds no longer have the dependencies bundled with them, @alpinejs/navigate needs to have this dependency defined in its package.json because this package is used in packages/navigate/src/bar.js. Let me know if you have any more questions and I'll do my best to answer them 😊

[joshhanley]

@jameschensmith ok, great! Thanks for that 🙂

[calebporzio]

Thanks!

[RobertBoes]

This change seems to cause issues in our project, after upgrading alpinejs to 3.12.1 we're getting the following error:

ERROR in ./node_modules/alpinejs/dist/module.esm.js 1562:0-88
Module not found: Error: Can't resolve '@vue/reactivity' in '/[path-to-project]/node_modules/alpinejs/dist'

Even adding "@vue/reactivity": "^3.3.1", to our own project doesn't solve the issue and still gives the same error. The weird thing is looking in the node_modules/alpinejs folder I do see @vue/reactivity is installed in node_modules/alpinejs/node_modules/@vue/reactivity

[ekwoka]

That's quite strange. I'd try deleting node modules and package-lock and reinstalling.

Which bundler are you using? Maybe you're not using node module resolution

[RobertBoes]

Removing the node_modules had no effect. We're using Laravel Mix (Webpack) and the "type": "module", is only really recently introduced/become the standard in fresh Laravel apps.

But if this change would require one to have "type": "module", in their package.json it seems like a big breaking change to me

[ekwoka]

It doesn't and wouldn't. Although, many would say using webpack and cjs was already broken.

what is important is the module resolution, not the type of module.

Basically that it should walk up the tree checking for node_modules folders when the path isn't relative.

But if you are not using type module, and it is still going to esm.js that may be an issue, but most likely with your system, since it should be resolving the cjs module.

[RobertBoes]

I think I've found the issue, thanks @ekwoka for pointing me in the right direction :D We have an alias defined, @vue which points to the folder with Vue components, so that would conflict with the @vue/reactivity import.

[ekwoka]

That would do it!!!!

This is why it's most common to have your aliases be @/

[calebporzio]

It seems that this PR caused bundling issues. I reverted it.