vite: vue is undefined in runtime #583

AndreyYolkin · 2022-10-18T10:56:41Z

Environment

Operating System: Linux
Node Version: v16.15.1
Nuxt Version: 2.16.0-27720022.54e852f
Nitro Version: 0.5.4
Package Manager: npm@8.13.2
Builder: vite
User Config: bridge, build, buildModules, vuetify, serverHandlers, devServerHandlers
Runtime Modules: -
Build Modules: (), @nuxtjs/vuetify@1.12.3, @nuxt/bridge@0.10.1

Reproduction

https://github.com/AndreyYolkin/nuxt-vuetify-issue (better explained)
https://github.com/AndreyYolkin/nuxtjs-vuetify (with @nuxtjs/vuetify)

Describe the bug

For some reasons files that use Vue import in undefined at runtime. I've got this problem trying to make vuetify 2 work with latest bridge versions.

Additional context

No response

Logs

entry.mjs:100 TypeError: Cannot read properties of undefined (reading 'observable')
    at Vue.<anonymous> (index.ts:239:23)
    at Vue.on (vue.runtime.esm.js?v=6c5bc416:3655:16)
    at invokeWithErrorHandling (vue.runtime.esm.js?v=6c5bc416:3015:30)
    at Vue.$emit (vue.runtime.esm.js?v=6c5bc416:3714:17)
    at callHook$1 (vue.runtime.esm.js?v=6c5bc416:4033:12)
    at Vue._init (vue.runtime.esm.js?v=6c5bc416:5678:9)
    at new Vue (vue.runtime.esm.js?v=6c5bc416:5747:10)
    at mountApp (entry.mjs:737:16)

The text was updated successfully, but these errors were encountered:

danielroe · 2022-10-18T11:39:15Z

You may need to transpile these libraries (e.g. vuetify) to ensure you are using the same version of vue.

AndreyYolkin · 2022-10-18T11:43:20Z

https://github.com/AndreyYolkin/nuxt-vuetify-issue/blob/master/nuxt.config.ts#L10
https://github.com/AndreyYolkin/nuxtjs-vuetify/blob/master/nuxt.config.ts#L8

Yes, I tried, and still have troubles

hieunhit · 2022-10-23T18:45:40Z

have the same issue with vue-demi

refs: vitejs/vite#10406

IlyaSemenov · 2022-11-07T06:49:44Z

+1 on this. I traced this to default export being deliberately removed in esbuild's __reExport.

Related issue: evanw/esbuild#1737

I ended up with a bunch of pnpm patches:

exporting { Vue } from vue itself
importing { Vue } from 'vue' in the affected libraries

diff --git a/dist/vue.runtime.esm.js b/dist/vue.runtime.esm.js
index 1786d28198333ad006b15289e77790083e88594f..2d1e626ee4932bac121aaececf9edaa08acb729a 100644
--- a/dist/vue.runtime.esm.js
+++ b/dist/vue.runtime.esm.js
@@ -8782,4 +8782,5 @@ if (inBrowser) {
     }, 0);
 }
 
+export { Vue }
 export { EffectScope, computed, customRef, Vue as default, defineAsyncComponent, defineComponent, del, effectScope, getCurrentInstance, getCurrentScope, h, inject, isProxy, isReactive, isReadonly, isRef, isShallow, markRaw, mergeDefaults, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, provide, proxyRefs, reactive, readonly, ref$1 as ref, set, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useListeners, useSlots, version, watch, watchEffect, watchPostEffect, watchSyncEffect };
diff --git a/dist/vue.runtime.mjs b/dist/vue.runtime.mjs
index 83d889271bd477fe1506c030fd6b351cdf1fe99b..3b6ed86a7e52e8004934f927b3867aa2d313aee1 100644
--- a/dist/vue.runtime.mjs
+++ b/dist/vue.runtime.mjs
@@ -1,5 +1,6 @@
 import Vue from './vue.runtime.common.js'
 export default Vue
+export { Vue }
 
 // this should be kept in sync with src/v3/index.ts
 export const {

and then like:

diff --git a/dist/portal-vue.esm.js b/dist/portal-vue.esm.js
index 05e6c55723bc8f303569f8deb9dd2b186a9856a8..f69c765ea376cffc50f5e64fd0c04a28edda88d3 100644
--- a/dist/portal-vue.esm.js
+++ b/dist/portal-vue.esm.js
@@ -10,7 +10,7 @@
   * 
  */
 
-import Vue from 'vue';
+import { Vue } from 'vue';
 
 function _typeof(obj) {
   if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {

AndreyYolkin · 2022-11-22T10:21:06Z

+1 on this. I traced this to default export being deliberately removed in esbuild's __reExport.

Related issue: evanw/esbuild#1737

I ended up with a bunch of pnpm patches:

exporting { Vue } from vue itself
importing { Vue } from 'vue' in the affected libraries

diff --git a/dist/vue.runtime.esm.js b/dist/vue.runtime.esm.js
index 1786d28198333ad006b15289e77790083e88594f..2d1e626ee4932bac121aaececf9edaa08acb729a 100644
--- a/dist/vue.runtime.esm.js
+++ b/dist/vue.runtime.esm.js
@@ -8782,4 +8782,5 @@ if (inBrowser) {
     }, 0);
 }
 
+export { Vue }
 export { EffectScope, computed, customRef, Vue as default, defineAsyncComponent, defineComponent, del, effectScope, getCurrentInstance, getCurrentScope, h, inject, isProxy, isReactive, isReadonly, isRef, isShallow, markRaw, mergeDefaults, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, provide, proxyRefs, reactive, readonly, ref$1 as ref, set, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useListeners, useSlots, version, watch, watchEffect, watchPostEffect, watchSyncEffect };
diff --git a/dist/vue.runtime.mjs b/dist/vue.runtime.mjs
index 83d889271bd477fe1506c030fd6b351cdf1fe99b..3b6ed86a7e52e8004934f927b3867aa2d313aee1 100644
--- a/dist/vue.runtime.mjs
+++ b/dist/vue.runtime.mjs
@@ -1,5 +1,6 @@
 import Vue from './vue.runtime.common.js'
 export default Vue
+export { Vue }
 
 // this should be kept in sync with src/v3/index.ts
 export const {

and then like:

diff --git a/dist/portal-vue.esm.js b/dist/portal-vue.esm.js
index 05e6c55723bc8f303569f8deb9dd2b186a9856a8..f69c765ea376cffc50f5e64fd0c04a28edda88d3 100644
--- a/dist/portal-vue.esm.js
+++ b/dist/portal-vue.esm.js
@@ -10,7 +10,7 @@
   * 
  */
 
-import Vue from 'vue';
+import { Vue } from 'vue';
 
 function _typeof(obj) {
   if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {

Yes, with the way you suggested, #561 (comment) and commenting this lines

bridge/src/vite/client.ts

Lines 113 to 115 in 586434b

    
           if (!originalURL.startsWith(clientConfig.base!)) { 
        
             event.req.url = joinURL('/__url', originalURL) 
        
           }

I (probably) achieved working state without errors both in dev/prod mode.

On the one hand, this issue might be labeled with upstream-bug as the problem came from esbuild. On the other hand, there is https://nuxt.com/docs/api/configuration/nuxt-config#externalvue option in config, which didn't solve the problem. Sooo it needs to dive into and figure out why it's happening even with experimental.externalvue: false

AndreyYolkin · 2023-02-03T16:24:04Z

I ended up with this solution, which inherits @IlyaSemenov ideas, but saves us from patching source files:

create Nuxt module with @nuxt/kit (or use existing one from your codebase)

add this to your setup function inside this module:

    if (nuxt.options.dev) {
      addVitePlugin({
        name: 'vue-default-normalizer',
        enforce: 'pre',
        transform(src, id) {
          if (src.includes('vue_exports.default')) {
            return {
              code: src.replaceAll('vue_exports.default', 'vue_exports.Vue')
            }
          }
          if (
            id.includes('vue/dist/vue.runtime.esm.js') ||
            id.includes('vue/dist/vue.runtime.mjs')
          ) {
            return {
              code: src + '\nexport { Vue }\n'
            }
          }
          return null
        }
      })
    }

Please keep in mind, that this will not create named { Vue } import and didn't modify the source code. So, you still need to write a code with default Vue import. Otherwise, you will get errors during the build stage.

@danielroe at this moment even playground in this repo is broken (because of vue-demi). I understand that there can be more clean code, but I suggest mark this as workaround or refactor a bit and include to the vite builder

wattanx · 2023-05-22T13:24:05Z

I tried creating a new one with a similar configuration to https://github.com/AndreyYolkin/nuxt-vuetify-issue, but it seems like the issue doesn't occur with the latest version.
https://stackblitz.com/edit/github-3fgb91-m7baf3

AndreyYolkin · 2023-05-22T13:31:24Z

I tried creating a new one with a similar configuration to https://github.com/AndreyYolkin/nuxt-vuetify-issue, but it seems like the issue doesn't occur with the latest version. https://stackblitz.com/edit/github-3fgb91-m7baf3

Yes, that's why I closed the PR, but forgot to close this issue. Thank you for reminding me 🙂

AndreyYolkin added the pending triage label Oct 18, 2022

AndreyYolkin mentioned this issue Mar 25, 2023

fix(vite-dev): replace default Vue import with named #723

Closed

7 tasks

AndreyYolkin closed this as completed May 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

vite: vue is undefined in runtime #583

vite: vue is undefined in runtime #583

AndreyYolkin commented Oct 18, 2022

danielroe commented Oct 18, 2022

AndreyYolkin commented Oct 18, 2022 •

edited

Loading

hieunhit commented Oct 23, 2022 •

edited

Loading

IlyaSemenov commented Nov 7, 2022 •

edited

Loading

AndreyYolkin commented Nov 22, 2022

AndreyYolkin commented Feb 3, 2023 •

edited

Loading

wattanx commented May 22, 2023

AndreyYolkin commented May 22, 2023

vite: vue is undefined in runtime #583

vite: vue is undefined in runtime #583

Comments

AndreyYolkin commented Oct 18, 2022

Environment

Reproduction

Describe the bug

Additional context

Logs

danielroe commented Oct 18, 2022

AndreyYolkin commented Oct 18, 2022 • edited Loading

hieunhit commented Oct 23, 2022 • edited Loading

IlyaSemenov commented Nov 7, 2022 • edited Loading

AndreyYolkin commented Nov 22, 2022

AndreyYolkin commented Feb 3, 2023 • edited Loading

wattanx commented May 22, 2023

AndreyYolkin commented May 22, 2023

AndreyYolkin commented Oct 18, 2022 •

edited

Loading

hieunhit commented Oct 23, 2022 •

edited

Loading

IlyaSemenov commented Nov 7, 2022 •

edited

Loading

AndreyYolkin commented Feb 3, 2023 •

edited

Loading