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

@vue/compiler-core cjs build 3.2.5+ throws error if bundled with vite default configuration #4531

Closed
haoqunjiang opened this issue Sep 6, 2021 · 0 comments

Comments

@haoqunjiang
Copy link
Member

Version

3.2.9

Reproduction link

https://github.com/sodatea/compiler-core-babel-types

Steps to reproduce

git clone https://github.com/sodatea/compiler-core-babel-types.git
cd compiler-core-babel-types
pnpm i
pnpm dev

And you'll see the error log in the browser console.

The issue only exists in the CJS build.
The CJS build will be picked by Vite when @vue/compiler-core is an indirect dependency of a CJS-only package. For example, @cypress/vue.

This issue breaks Cypress Component Testing: cypress-io/cypress#17902

What is expected?

No error

What is actually happening?

Uncaught ReferenceError: process is not defined
    at node_modules/.pnpm/@[email protected]/node_modules/@babel/types/lib/definitions/core.js (core.js:22)
    at __require (chunk-4SEQJKOJ.js?v=e088fd5a:7)
    at node_modules/.pnpm/@[email protected]/node_modules/@babel/types/lib/definitions/index.js (index.js:70)
    at __require (chunk-4SEQJKOJ.js?v=e088fd5a:7)
    at node_modules/.pnpm/@[email protected]/node_modules/@babel/types/lib/builders/builder.js (builder.js:8)
    at __require (chunk-4SEQJKOJ.js?v=e088fd5a:7)
    at node_modules/.pnpm/@[email protected]/node_modules/@babel/types/lib/builders/generated/index.js (index.js:257)
    at __require (chunk-4SEQJKOJ.js?v=e088fd5a:7)
    at node_modules/.pnpm/@[email protected]/node_modules/@babel/types/lib/utils/react/cleanJSXElementLiteralChild.js (cleanJSXElementLiteralChild.js:8)
    at __require (chunk-4SEQJKOJ.js?v=e088fd5a:7)

It is because of this commit: 62f7525#diff-0e15aa4ce958d5d1b4c2bb54dae30b0d1fffd5fe8c63c2bea5eff3269bf7faa0

  • When isRefIdentifier is refactored to isReferencedIdentifier, a runtime dependency from @babel/types is introduced (isReferenced).
  • @babel/types is not compatible with Vite by default, as it uses the process.env.BABEL_TYPES_8_BREAKING environment variable (Vite only processes common env variables like process.env.NODE_ENV).
  • In the versions prior to 3.2.5, though @babel/types is listed as a dependency, only its type definitions are used, so there's no runtime dependency on it, the code referencing process.env.BABEL_TYPES_8_BREAKING never got executed, thus no errors.

I'm not sure in which package should we address this issue and prevent similar ones from happening again.

  • Maybe @babel/types can be moved to devDependencies and we only use import types { /* ... */ } from '@babel/types' from now on?
  • It can also be fixed in @cypress/vue by shipping an additional ESM bundle for Vite. But I think we should still support the CJS build of @vue/compiler-core in Vite.
  • Or, shall we work around this kind of issue in vite or @vitejs/plugin-vue?
  • Or, shall we report to upstream Babel packages? (Though, the relevant babel code has been in the repo for more than 1 year. So I don't think they'll take it as a bug).
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant