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-router with vite-ssr

See original GitHub issue

The problem was when using sсoped styles together with a router-link in one component, I took a ready-made example that was here but it gave an error

file: pages/Home.vue

<template>
  <h1>Home</h1>
  <p>This content is rendered to HTML.</p>
  <router-link to="/lol">Home</router-link>
</template>

<style scoped>
h1 {
  color: green;
}
</style>

Error

Error: Unable to parse {"file":"/","line":4,"column":299}
2  |      <html>
3  |        <body>
4  |          <div id="app"><!--[--><div><a aria-current="page" href="/" class="router-link-active router-link-exact-active">Home</a> | <a href="/about" class="">About</a><!--[--><h1 data-v-7f245110>Home</h1><p data-v-7f245110>This content is rendered to HTML.</p><a href="/lol" class="" data-v-7f245110 data-v-7f245110>Home</a><!--]--></div><div><button>count is: 0</button></div><!--]--></div>
   |
                                                                                     ^
5  |        </body>
6  |      </html>
    at traverseHtml (D:\vite-plugin-ssr-master\vite-plugin-ssr-master\examples\vue-router\node_modules\vite\dist\node\chunks\dep-efe32886.js:23936:15)
    at async devHtmlHook (D:\vite-plugin-ssr-master\vite-plugin-ssr-master\examples\vue-router\node_modules\vite\dist\node\chunks\dep-efe32886.js:59458:5)
    at async applyHtmlTransforms (D:\vite-plugin-ssr-master\vite-plugin-ssr-master\examples\vue-router\node_modules\vite\dist\node\chunks\dep-efe32886.js:24202:21)
    at async applyViteHtmlTransform (D:\vite-plugin-ssr-master\vite-plugin-ssr-master\examples\vue-router\node_modules\vite-plugin-ssr\dist\renderPage.node.js:227:20)
    at async renderPageId (D:\vite-plugin-ssr-master\vite-plugin-ssr-master\examples\vue-router\node_modules\vite-plugin-ssr\dist\renderPage.node.js:114:20)
    at async renderPage (D:\vite-plugin-ssr-master\vite-plugin-ssr-master\examples\vue-router\node_modules\vite-plugin-ssr\dist\renderPage.node.js:63:24)
    at async D:\vite-plugin-ssr-master\vite-plugin-ssr-master\examples\vue-router\server\index.js:28:20
[vite-plugin-ssr][Warning] No `_error.page.js` found. We recommend creating a `_error.page.js` file. (This warning is not shown in production.)

Issue Analytics

State:
Created 2 years ago
Comments:13 (9 by maintainers)

Top GitHub Comments

1reaction

alsyapukovcommented, Mar 22, 2021

Thank’s, I’m created issue https://github.com/vitejs/vite/issues/2644 While that will work with FS routing

0reactions

brilloutcommented, Apr 7, 2021

Actually, Node.js initially shipped a buggy implementation. It should work with v12.19.0. Let me know if you run into any other issue.

Top Results From Across the Web

Vue Router & React Router - vite-plugin-ssr

We can use any routing library, such as Vue Router or React Router. Shallow integration: (React/Vue Router supersedes vite-plugin-ssr 's built-in router.).

Vue-router with vite ssr · Issue #2644 · vitejs/vite - GitHub

The problem was when using sсoped styles together with a router-link in one component, I took a ready-made example that was here but...

Server-Side Rendering - Vite

Vite provides built-in support for server-side rendering (SSR). The Vite playground contains example SSR setups for Vue 3 and React, which can be...

vite-ssr-vue - npm

Vite utility for vue3 server side rendering. Latest version: 1.0.4, last published: a month ago. Start using vite-ssr-vue in your project by ...

How to use both vue-router and vuex correctly in a vite-vue ...

I'm learning Vue SSR. I tried to rewrite one of my project and use Server-Side Rendering that is suggested by Vite documentation.