question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vue-demi not working with prerendering (nuxi generate)

See original GitHub issue

Environment

  • Operating System: Linux
  • Node Version: v16.13.0
  • Nuxt Version: 3.0.0-rc.1
  • Package Manager: yarn@1.22.17
  • Builder: vite
  • User Config: target, bridge, vite, alias, nitro, ssr, meta, css, tailwindcss, modules, watch, runtimeConfig, build, storybook
  • Runtime Modules: @nuxtjs/tailwindcss@5.0.2, @pinia/nuxt@0.1.8
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/github-5qjawv?file=nuxt.config.ts (not sure if this really reproduces the error, I’m currently on a low-memory machine and nuxi generate on stackblitz fails with out of memory). https://github.com/JabRef/JabRefOnline/pull/1009

Describe the bug

  1. Set ssr: true and target: 'static' in the nuxt config.
  2. Use a library that relies on vue-demi. In the reproduction, this is apollo-composables.
  3. nuxi generate results in the following error:
....
✔ Server built in 1756ms                                                           10:50:50
✔ Generated public .output/public                                            nitro 10:50:51
ℹ Initializing prerenderer                                                   nitro 10:50:51
ℹ Prerendering 1 initial routes with crawler                                 nitro 10:51:19

 ERROR  (0 , import_vue_demi5.getCurrentInstance) is not a function                10:51:19

  at useQueryImpl (.nuxt/prerender/chunks/app/server.mjs:337:54)
  at Object.useQuery (.nuxt/prerender/chunks/app/server.mjs:333:10)
  at setup (.nuxt/prerender/chunks/app/server.mjs:30969:40)
  at _sfc_main$e.setup (.nuxt/prerender/chunks/app/server.mjs:31114:25)
  at callWithErrorHandling (.nuxt/prerender/chunks/index.mjs:1986:22)
  at setupStatefulComponent (.nuxt/prerender/chunks/index.mjs:7580:29)
  at setupComponent (.nuxt/prerender/chunks/index.mjs:7561:11)
  at renderComponentVNode (.nuxt/prerender/chunks/index.mjs:9920:17)
  at Object.ssrRenderComponent (.nuxt/prerender/chunks/index.mjs:10351:12)
  at _sfc_ssrRender$7 (.nuxt/prerender/chunks/app/server.mjs:31672:32)


 ERROR  (0 , import_vue_demi.getCurrentInstance) is not a function                 10:51:19

  at Object.useApolloClient (.nuxt/prerender/chunks/app/server.mjs:136:47)
  at setup (.nuxt/prerender/chunks/app/server.mjs:31120:38)
  at _sfc_main$d.setup (.nuxt/prerender/chunks/app/server.mjs:31238:25)
  at callWithErrorHandling (.nuxt/prerender/chunks/index.mjs:1986:22)
  at setupStatefulComponent (.nuxt/prerender/chunks/index.mjs:7580:29)
  at setupComponent (.nuxt/prerender/chunks/index.mjs:7561:11)
  at renderComponentVNode (.nuxt/prerender/chunks/index.mjs:9920:17)
  at Object.ssrRenderComponent (.nuxt/prerender/chunks/index.mjs:10351:12)
  at _sfc_ssrRender$7 (.nuxt/prerender/chunks/app/server.mjs:31674:32)
  at renderComponentSubTree (.nuxt/prerender/chunks/index.mjs:9991:13)


 ERROR  [nuxt] [request error] (0 , import_vue_demi5.getCurrentInstance) is not a function
  at useQueryImpl (./.nuxt/prerender/chunks/app/server.mjs:337:54)  
  at Object.useQuery (./.nuxt/prerender/chunks/app/server.mjs:333:10)  
  at setup (./.nuxt/prerender/chunks/app/server.mjs:30969:40)  
  at _sfc_main$e.setup (./.nuxt/prerender/chunks/app/server.mjs:31114:25)  
  at callWithErrorHandling (./.nuxt/prerender/chunks/index.mjs:1986:22)  
  at setupStatefulComponent (./.nuxt/prerender/chunks/index.mjs:7580:29)  
  at setupComponent (./.nuxt/prerender/chunks/index.mjs:7561:11)  
  at renderComponentVNode (./.nuxt/prerender/chunks/index.mjs:9920:17)  
  at Object.ssrRenderComponent (./.nuxt/prerender/chunks/index.mjs:10351:12)  
  at _sfc_ssrRender$7 (./.nuxt/prerender/chunks/app/server.mjs:31672:32)

Additional context

The relevant part of .nuxt/prerender/chunks/app/server.mjs shows that vue demi is indeed missing many things from vue

const vueDemi = /*#__PURE__*/Object.freeze({
  __proto__: null,
  Vue2: Vue2,
  isVue2: isVue2,
  isVue3: isVue3,
  install: install$1,
  set: set,
  del: del
});

const require$$0$1 = /*@__PURE__*/getDefaultExportFromNamespaceIfNotNamed(vueDemi);

Logs

No response

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:2
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
Der-Alexcommented, Jun 21, 2022

Hi @danielroe I updated my dependencies and now it seems to work.

0reactions
GitarMancommented, Jun 24, 2022

I forgot to mention, that I added apollo-composable to the transpile option in nuxt.config.js:

transpile: [
  '@apollo/client/core',
  '@vue/apollo-composable'
],`

I was also experiencing this same issue. Adding @Der-Alex 's transpile settings seems to have helped to fix.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to prerender content with Nuxt Js from own Api?
I am trying this, but it looks like works only from .md or .json files, I don't understand how to generate automatically with...
Read more >
Nuxt 3 公式ドキュメント 日本語訳 - Zenn
nuxi dev と nuxi build (または nuxi generate )で試してみて、すべてがうまくいくか ... vue-demi を使用することで、Nuxt 2 と 3 の両方に互換性があるはずです。
Read more >
Nuxt Server Side Rendering vs Pre-rendering
To build your Nuxt project using Server Side Rendering (SSR) you need to ensure your target is server in your Nuxt config file....
Read more >
nuxt: Versions | Openbase
How to Upgrade. Note Make sure to recreate the lock file in the project in case of any issues after the upgrade. Automated:...
Read more >
error: command failed: npm install cgb-scripts --save - You.com
Hi everyone, I'm having problems to creating de plugin in my plugins folder ... node-gyp@3.8.0 gyp info using node@8.16.1 | linux | x64...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found