Skip to content

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

@haoqunjiang

Description

@haoqunjiang

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/@babel+types@7.15.4/node_modules/@babel/types/lib/definitions/core.js (core.js:22)
    at __require (chunk-4SEQJKOJ.js?v=e088fd5a:7)
    at node_modules/.pnpm/@babel+types@7.15.4/node_modules/@babel/types/lib/definitions/index.js (index.js:70)
    at __require (chunk-4SEQJKOJ.js?v=e088fd5a:7)
    at node_modules/.pnpm/@babel+types@7.15.4/node_modules/@babel/types/lib/builders/builder.js (builder.js:8)
    at __require (chunk-4SEQJKOJ.js?v=e088fd5a:7)
    at node_modules/.pnpm/@babel+types@7.15.4/node_modules/@babel/types/lib/builders/generated/index.js (index.js:257)
    at __require (chunk-4SEQJKOJ.js?v=e088fd5a:7)
    at node_modules/.pnpm/@babel+types@7.15.4/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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions