Блог

Главная - Вопросы по программированию - Ошибка типа VUE JS 3: vue.initDirectivesForSSR не является функцией

Ошибка типа VUE JS 3: vue.initDirectivesForSSR не является функцией

#javascript #node.js #vue.js #webpack

Вопрос:

Я пытался создать свое веб-приложение vue, используя эту конфигурацию, но у меня возникли эти ошибки, я пытался решить эту проблему, но я не могу найти кого-то, у кого та же проблема, что и у меня. Как я могу решить эту проблему, судя по тому, как сборка прошла успешно, проблемы возникли при попытке запуска node src/server.jsx ? Заранее спасибо

 $ node src/server.jsx
D:myPathProjectnode_modules@vueserver-rendererdistserver-renderer.cjs.js:994
vue.initDirectivesForSSR();
    ^

TypeError: vue.initDirectivesForSSR is not a function
    at Object.<anonymous> (D:myPathProjectnode_modules@vueserver-rendererdistserver
-renderer.cjs.js:994:5)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (D:myPathProjectnode_modules@vueserver-rendererindex.js:6:
20)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)

это мой vue.config.js файл

 /* eslint-disable @typescript-eslint/no-var-requires */
const { WebpackManifestPlugin } = require("webpack-manifest-plugin")
const nodeExternals = require("webpack-node-externals")

exports.chainWebpack = (webpackConfig) => {
  if (!process.env.VUE_APP_SSR) return

  webpackConfig
    .entry("app")
    .clear()
    .add("./src/main.server.ts")

  webpackConfig.target("node")
  webpackConfig.output.libraryTarget("commonjs2")

  webpackConfig
    .plugin("manifest")
    .use(new WebpackManifestPlugin({ fileName: "ssr-manifest.json" }))

  webpackConfig.externals(nodeExternals({ allowlist: /.(css|vue)$/ }))

  webpackConfig.optimization.splitChunks(false).minimize(false)

  webpackConfig.plugins.delete("hmr")
  webpackConfig.plugins.delete("preload")
  webpackConfig.plugins.delete("prefetch")
  webpackConfig.plugins.delete("progress")
  webpackConfig.plugins.delete("friendly-errors")
}

а это мое server.jsx досье

 /* eslint-disable @typescript-eslint/no-var-requires */
const express = require("express")
const path = require("path")
const { createSSRApp } = require("vue")
const { renderToString } = require("@vue/server-renderer")

const manifest = require("../dist/ssr-manifest.json")

const server = express()

const appPath = path.join(__dirname, "../dist", manifest["app.js"])

const App = require(appPath).default

server.get("*", async (_req, res) => {
  const content = createSSRApp(App)
  const appContent = await renderToString(content)

  const html = `
    <html>
      <head>
        <title>Hello</title>
      </head>
      <body>
        ${appContent}
      </body>
    </html>
  `

  res.end(html)
})

server.listen(8080)

Спасибо вам, ребята

Ответ №1:

Попробуйте обновить свою версию Vue 3.

Мой пакет @vue/сервер-визуализатор был 3.2.20, а моя версия Vue была 3.2.6. Я увеличил свою версию Vue до 3.2.20, и теперь она отлично работает. 🙂

Комментарии:

1. привет @tomdevin у вас такая же ошибка?

2. Я так и сделал, да. Теперь это исправлено после обновления.

Метки: