Crash on Vue 3.1 using onServerPrefetch about vite-ssr HOT 12 CLOSED

Let's please stop this conversation, because you're not helping.

I have provided the reproduction repo which the project author may (or may not) find useful.

from vite-ssr.

Interestingly, in a slightly different environment I'm getting different crashes (on the same component):

[Vue warn]: Unhandled error during execution of setup function 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:2929
        const apiName = __vite_ssr_import_1__.toHandlerKey(ErrorTypeStrings[type].replace(/ hook$/, ''));
                                                                                  ^

TypeError: Cannot read property 'replace' of undefined
    at injectHook (/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:2929:83)
    at Module.eval (/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:2941:5)
    at setup (/src/pages/index.vue:8:27)
    at _sfc_main.setup (/src/pages/index.vue:36:23)
    at callWithErrorHandling (/Users/semenov/work/xyzzy/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:156:22)
    at setupStatefulComponent (/Users/semenov/work/xyzzy/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7069:29)
    at setupComponent (/Users/semenov/work/xyzzy/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7025:11)
    at renderComponentVNode (/Users/semenov/work/xyzzy/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:160:17)
    at renderVNode (/Users/semenov/work/xyzzy/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:266:22)
    at renderComponentSubTree (/Users/semenov/work/xyzzy/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:231:13)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

from vite-ssr.

@IlyaSemenov You are importing from "@vue/runtime-core" which isn't correct, I think. Try to import from "vue" instead.

from vite-ssr.

@MarvinRudolph You must be kidding... vue simply re-exports these symbols from @vue/runtime-core.

But for the sake of brevity, I updated the reproduction repo. Obviously, that didn't change the outcome, it still crashes the same way.

from vite-ssr.

@IlyaSemenov Well, it works for me. It crashes when I import from runtime-core with Internal server error: Cannot read property 'replace' of undefined. No errors when importing from vue.
But it's still not correct to import from runtime-core. Vite handles dependencies differently and you should import from vue.

Looks like your alias causes that error. When I remove it, it works with your repro.

from vite-ssr.

But it's still not correct to import from runtime-core.

Yes, it is correct according to the documentation:

"This means you can install/import these deps individually [...]"

Vite handles dependencies differently and you should import from vue.

Vite (or rather, esbuild) uses node_modules/vue/package.json:

  "module": "dist/vue.runtime.esm-bundler.js",

which simply says:

export * from '@vue/runtime-dom';

There is nothing different or magic in this.

No errors when importing from vue.
Looks like your alias causes that error.

That simply means there is some kind of race condition. Both using alias and importing directly from @vue/runtime-dom are fully correct and documented approaches, which work properly until onServerPrefetch is used.

For me, it crashes with import { ... } from "vue" as well. I haven't checked it without alias and honestly I don't see much point in doing so. I believe that until the documentation says "don't use aliases with server prefetch" (which is nonsense) there's no point in blaming aliases.

from vite-ssr.

I don't have any problems with alias and onServerPrefetch in a TypeScript project. Resolves modules with @/foo.ts without problems, no errors or crashes. Maybe your tsconfig.json is wrong?

from vite-ssr.

Just wanted to help ¯_(ツ)_/¯

from vite-ssr.

I realise that you wanted to help, but you gave three meaningless advices in a row:

1. Replace import source, without understanding that it's simply a shortcut re-export.
2. Remove alias from vite config, without understanding that aliases have nothing to do with the problem (and even if it did help by coincidence, that would constitute an error by itself).
3. Check tsconfig.json (without pointing to a specific error), as if it were a resolve problem (which it is clearly not).

No offense, but it's clear that you're not as competent as you probably think you are (this is called Dunning–Kruger effect). That is why I personally asked you to stop, because, again, you're not helping, even if you truly had best intentions.

from vite-ssr.

On a separate note, I worked around the problem by implementing a hook similar to fastify-vite's useServerData, which:

• writes to initialState during SSR
• pulls data from initialState during initial render/rehydration
• runs code client-side after SPA navigation

Still, I believe onServerFetch deserves to be fixed.

from vite-ssr.

Wow, you are so smart, Ilya! Everyone should fall to the knees in front of you. 🙄
It still works without any problems for me when following the documentation. No problems with onServerPrefetch in a ts project. So at this point it's clearly your fault if you can't set up the project correctly. Why not just create your app with the vite cli? No need to be unfriendly to people who just want to help. Also, there is no reason to import from compiler-core directly. Just doesn't make sense. That's why vue re-exports it. But well, do your thing, good luck.

from vite-ssr.

Thank you for pointing that without aliases it does work. I concur that, and I was able to significantly simplify the reproduction case.

Of course, that doesn't mean that aliases itself are the problem (it is a widely used, documented feature), but it means that the problem resides at some different level, apparently in SSR module resolver/loader. Using aliases + onServerPrefetch simply surfaces it by coincidence.

I opened a separate issue and will close this one.

from vite-ssr.