Vite + Vue 3 + ssr. Проблема scoped стилей

Question

Vite почему-то не может спарсить на сервере мой сгенерированный html если в компонентах начинаю использовать scoped

Error: Unable to parse {"file":"/","line":4,"column":146}
2  |      <html>
3  |        <body>
4  |          <div id="app"><!--[--><!--[--><div class="header" data-v-44909493><div class="wrap" data-v-44909493><a href="/" class="" data-v-44909493 data-v-44909493><div class="logo" data-v-44909493><div class="img" data-v-44909493></div><div class="text" data-v-44909493>Gillo</div></div></a><div class="right" data-v-44909493></div></div></div><!-- <header>asdas</header> --><!--[--><h1 data-v-0d410102>To-do List</h1><ul data-v-0d410102><!--[--><li data-v-0d410102>Buy milk</li><li data-v-0d410102>Buy chocolate</li><!--]--></ul><!--]--><!--]--><!--]--></div>
   |
                                           ^
5  |        </body>
6  |      </html>
    at traverseHtml (D:\work\ads-client\node_modules\vite\dist\node\chunks\dep-efe32886.js:23936:15)        
    at processTicksAndRejections (internal/process/task_queues.js:85:5)
    at async devHtmlHook (D:\work\ads-client\node_modules\vite\dist\node\chunks\dep-efe32886.js:59458:5)    
    at async applyHtmlTransforms (D:\work\ads-client\node_modules\vite\dist\node\chunks\dep-efe32886.js:24202:21)
    at async applyViteHtmlTransform (D:\work\ads-client\node_modules\vite-plugin-ssr\dist\renderPage.node.js:214:20)
    at async renderPageId (D:\work\ads-client\node_modules\vite-plugin-ssr\dist\renderPage.node.js:114:20)  
    at async renderPage (D:\work\ads-client\node_modules\vite-plugin-ssr\dist\renderPage.node.js:63:24)     
    at async D:\work\ads-client\server\index.js:28:20
Error: [vite-plugin-ssr][Warning] No `_error.page.js` found. We recommend creating a `_error.page.js` file. 
(This warning is not shown in production.)
    at warnMissingErrorPage (D:\work\ads-client\node_modules\vite-plugin-ssr\dist\renderPage.node.js:307:17)    at render500Page (D:\work\ads-client\node_modules\vite-plugin-ssr\dist\renderPage.node.js:336:9)        
    at renderPage (D:\work\ads-client\node_modules\vite-plugin-ssr\dist\renderPage.node.js:66:22)

Код компонента где используется scoped

<template>
  <div class="header">
    <div class="wrap">
      <router-link
        :to="{
          name: 'index',
        }"
      >
        <div class="logo">
          <div class="img"></div>
          <div class="text">Lol</div>
        </div>
      </router-link>
      <div class="right"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
};
</script>


<style lang="scss" scoped>

</style>

index.page.server.js

import { renderToString } from '@vue/server-renderer'
import { html } from 'vite-plugin-ssr'
import { createApp } from '../../src/main'

export { render }
export { addContextProps }
export { setPageProps }

async function render({ contextProps }) {
  const { appHtml } = contextProps
  return html`<!DOCTYPE html>
    <html>
      <body>
        <div id="app">${html.dangerouslySetHtml(appHtml)}</div>
      </body>
    </html>`
}

async function addContextProps({ Page }) {
  const { app, store } = createApp({ Page })

  const appHtml = await renderToString(app)

  const INITIAL_STATE = store.state

  return {
    INITIAL_STATE,
    appHtml
  }
}

function setPageProps({ contextProps }) {
  const { INITIAL_STATE } = contextProps
  return { INITIAL_STATE }
}

БЛОГ НА HUSL

Vite + Vue 3 + ssr. Проблема scoped стилей

Ответы (0 шт):