Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fishy dev build for npm:vue@3.2.47 #269

Open
Bubblyworld opened this issue Apr 17, 2023 · 13 comments
Open

Fishy dev build for npm:vue@3.2.47 #269

Bubblyworld opened this issue Apr 17, 2023 · 13 comments

Comments

@Bubblyworld
Copy link

If you run await import("https://jspm.dev/npm:vue@3.2.47") in the console, it throws:

Uncaught SyntaxError: The requested module '../../npm:@vue/runtime-dom@3.2.47' does not provide an export named 'default' (at e8b1ebe6.js:5:8)

Looking at that rollup chunk, it's trying to import the missing default:

import runtimeDom_3_2_47__default from '../../npm:@vue/runtime-dom@3.2.47';

...but indeed, runtime-dom has no default exports. Unsure why this is happening yet.

@guybedford
Copy link
Member

Can you post a failing test case for this to babel-plugin-transform-cjs-dew?

@Bubblyworld
Copy link
Author

Bubblyworld commented Apr 18, 2023

Ah, turns out this is actually a conventions problem, not a dew issue. Vue's package.json has a "modules" field pointing to "vue.runtime.esm-bundler.js", which is supposed to only be used server-side as part of their build tools (see here). It's not pointing to an ESM build of the package, which is what the CDN expects. I'll add an override.

@Bubblyworld
Copy link
Author

(I guess we should still link to vue.runtime.esm-bundler.js, but not for browser environments)

@Bubblyworld
Copy link
Author

Hmm, this seems to be a problem with a whole bunch of the @vue packages... both @vue/shared and @vue/reactivity have exports with "modules" pointing to a server-side-only build, for instance.

@Bubblyworld
Copy link
Author

Oops, this shouldn't have been closed.

@Bubblyworld Bubblyworld reopened this Apr 21, 2023
@Bubblyworld
Copy link
Author

The plan to solve this is to deprecate "module" as a default condition in the generator (and related projects), since packages don't consistently use it to mean "this is an ESM build of the package". For instance, in vue the "modules" field points to the node backend (which happens to be ESM) and not an ESM build of the main entry point.

@blangenfeld
Copy link

Closing #274 in favor of this one.

@guybedford
Copy link
Member

@blangenfeld did turning off the module condition resolve this issue for you in #274? Specifically running with jspm --env no-module?

@guybedford
Copy link
Member

Investigating this further in jspm/overrides#16, the exact issue is that the esm-bundler builds of Vue assume the process global to do dev / production branching, whereas JSPM does not support this in an ES module context (only for CommonJS for legacy support).

Therefore, as a compat issue, I've landed the override created by @tonysm in jspm/overrides#16 including fixes for @vue/reactivity, @vue/shared and @vue/runtime-dom.

If there are other Vue packages that we have missed though, we should add overrides for those as well, so please do report here if there are further issues.

@tonysm
Copy link

tonysm commented May 21, 2023

Interesting, I see the correct files in the generator when pulling @vue/reactivity and @vue/shared directly (generator link), but when it comes as a dependency of Alpine, it still pulls the bundle ones (generator link).

@guybedford
Copy link
Member

@tonysm AlpineJS seems to be using version 3.1.4 not 3.3.4. I've also invalidated that version as well now.

@tonysm
Copy link

tonysm commented May 28, 2023

Hey, thanks for the help on this @guybedford. It's working now!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants