Dual package hazard with esm

[sebamarynissen]

Version

2.7.3

Reproduction link

github.com

Steps to reproduce

import assert from 'node:assert';
import { createRequire } from 'node:module';
import Vue from 'vue';
const require = createRequire(import.meta.url);

assert.equal(Vue, require('vue'));

What is expected?

When importing Vue, it should be the same as when Vue is required.

What is actually happening?

Vue is different when imported than when using require.

---

In 2.7, the exports field is used in package.json to export a different version of Vue depending on whether Vue is imported or required. This is a breaking change when compared to 2.6 because here the exports field is not used and hence you always get the commonjs version. This can be problematic for example when using @vue/test-utils or vue-template-compiler because those use require to import vue (which led me to open this issue).

As per the dual package hazard, I think it would be better to use an esm wrapper, where vue.runtime.mjs does something like

import Vue from './vue.runtime.common.js';
export default Vue;
export const { watch, computed, h, ... } = Vue;

[sebamarynissen]

@yyx990803 Thanks for the quick reaction & fix! It does look though like you forgot to export the lifecycle hook onBeforeUnmount (see 012e10c).