Vite/Vue3 3在升级后抛出内部服务器错误(实验性语法/缺少解析器插件:装饰器)

Question

在更新Vite之后，我无法再启动我的项目了，因为我收到以下错误消息：

[vite] Internal server error: This experimental syntax requires enabling one of the following parser plugin(s): "decorators-legacy","decorators"

在更新之前，一切运行都没有问题，而且日志也没有真正帮助我。我在Vue和vue-class组件以及vue-属性装饰器中使用SFC作为我的组件。

我已更新如下：

vite: 2.6.14 -> 2.9.12
@vitejs/plugin-vue: 1.8.0 -> 2.3.3
@vue/compiler-sfc: 3.2.22 -> removed, because it is now a part of plugin-vue

这个问题发生在"vite“和"vite构建”脚本中。它发现的错误似乎主要发生在组件的部分：

// Log

12:55:04 [vite] Internal server error: This experimental syntax requires enabling one of the following parser plugin(s): "decorators-legacy", "decorators". (7:2)
  Plugin: vite:vue
  File: A:/repositories/private/scribe/src/components/app/ui/tooltip/Tooltip.vue
  6  |      <div
  7  |        class="tooltip"
  8  |        :class="{
     |      ^
  9  |          'tooltip--show': show,
  10 |          'tooltip--left': isLeft,
12:55:06 [vite] Internal server error: This experimental syntax requires enabling one of the following parser plugin(s): "decorators-legacy", "decorators". (21:2)
  Plugin: vite:vue
  File: A:/repositories/private/scribe/src/components/app/ui/dropdown/Dropdown.vue
  9  |        :class="{
  10 |          'dropdown-list--expanded': open,
  11 |          'dropdown-list--wide': wide,
     |                                     ^
  12 |          'dropdown-list--expanded-top': open && top,
  13 |        }"

这些是当前安装的依赖项：

// package.json

...

  "dependencies": {
    "@apollo/client": "3.6.9",
    "@fortawesome/fontawesome-svg-core": "6.1.1",
    "@fortawesome/free-brands-svg-icons": "6.1.1",
    "@fortawesome/free-regular-svg-icons": "6.1.1",
    "@fortawesome/free-solid-svg-icons": "6.1.1",
    "@fortawesome/vue-fontawesome": "3.0.0-5",
    "@samuelmeuli/font-manager": "1.4.0",
    "@tiptap/extension-font-family": "2.0.0-beta.24",
    "@tiptap/extension-image": "2.0.0-beta.30",
    "@tiptap/extension-link": "2.0.0-beta.42",
    "@tiptap/extension-text-align": "2.0.0-beta.31",
    "@tiptap/extension-text-style": "2.0.0-beta.26",
    "@tiptap/extension-underline": "2.0.0-beta.25",
    "@tiptap/starter-kit": "2.0.0-beta.189",
    "@tiptap/vue-3": "2.0.0-beta.95",
    "@types/he": "1.1.2",
    "@vue/apollo-composable": "4.0.0-alpha.18",
    "@vuelidate/core": "2.0.0-alpha.41",
    "@vuelidate/validators": "2.0.0-alpha.29",
    "click-outside-vue3": "4.0.1",
    "core-js": "3.23.2",
    "crypto-js": "4.1.1",
    "date-fns": "2.28.0",
    "dompurify": "2.3.8",
    "downloadjs": "1.4.7",
    "graphql": "16.5.0",
    "graphql-tag": "2.12.6",
    "he": "1.2.0",
    "html2canvas": "1.4.1",
    "jsonpack": "1.1.5",
    "localforage": "1.10.0",
    "lodash": "4.17.21",
    "mitt": "3.0.0",
    "object-hash": "3.0.0",
    "prismjs": "1.28.0",
    "register-service-worker": "1.7.2",
    "splitpanes": "3.1.1",
    "typogr": "0.6.8",
    "vite-plugin-markdown": "2.0.2",
    "vue": "3.2.37",
    "vue-class-component": "8.0.0-rc.1",
    "vue-color-kit": "1.0.5",
    "vue-gtag": "2.0.1",
    "vue-i18n": "9.1.10",
    "vue-prism-editor": "2.0.0-alpha.2",
    "vue-property-decorator": "10.0.0-rc.3",
    "vue-router": "4.0.16",
    "vue-scrollto": "2.20.0",
    "vue-waypoint": "4.2.1",
    "vuedraggable": "4.1.0",
    "vuex": "4.0.2"
  },
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "3.4.0",
    "@intlify/vue-i18n-loader": "4.2.0",
    "@types/crypto-js": "4.1.1",
    "@types/dompurify": "2.3.3",
    "@types/downloadjs": "1.4.3",
    "@types/jsonpack": "1.1.1",
    "@types/lodash": "4.14.182",
    "@types/object-hash": "2.2.1",
    "@types/prismjs": "1.26.0",
    "@types/splitpanes": "2.2.1",
    "@typescript-eslint/eslint-plugin": "5.29.0",
    "@typescript-eslint/parser": "5.29.0",
    "@vitejs/plugin-vue": "2.3.3",
    "@vue/eslint-config-prettier": "7.0.0",
    "@vue/eslint-config-typescript": "11.0.0",
    "eslint": "8.18.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-vue": "9.1.1",
    "lint-staged": "13.0.2",
    "prettier": "2.7.1",
    "sass": "1.53.0",
    "sass-loader": "13.0.0",
    "typescript": "4.7.4",
    "vite": "2.9.12",
    "vite-plugin-commonjs": "0.5.2",
    "vite-plugin-i18n-resources": "1.0.3",
    "vite-plugin-package-version": "1.0.2",
    "vue-tsc": "0.38.1"
  },

我的打字本配置：

// tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "useDefineForClassFields": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ],
    "types": [
      "@intlify/vite-plugin-vue-i18n/client"
    ],
    "typeRoots": [
      "./src/types",
      "./node_modules/@types"
    ],
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

我的Vite配置：

// vite.config.json

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import loadVersion from "vite-plugin-package-version";
import i18nResources from "vite-plugin-i18n-resources";
import markdown, { Mode } from "vite-plugin-markdown";
import { resolve } from "path";

const path = require("path")

function graphQlFile() {
  return {
    name: 'graphql-file',
    transform(src, id) {
      if (id.endsWith(".graphql") || id.endsWith(".gql")) {
        const str = JSON.stringify(src)
        return {
          code: "import gql from 'graphql-tag';const doc="+str+"; export default gql`${doc}`",
          map: null
        }
      }
    }
  }
}

export const ssrTransformCustomDirective = () => {
  return {
    props: [],
    needRuntime: true
  }
}

export default defineConfig({
  server: {
    port: 8080
  },
    resolve: {
    alias: [
      {
        find: "@",
        replacement: path.resolve(__dirname, "src")
      }
    ]
  },
  plugins: [
    vue({
      template: {
        ssr: true,
        compilerOptions: {
          directiveTransforms: {
            "click-outside": ssrTransformCustomDirective,
            "safe-html": ssrTransformCustomDirective
          }
        }
      }
    }),
    i18nResources({
      path: resolve(__dirname, "./src"),
    }),
    loadVersion(),
    graphQlFile(),
    markdown({ mode: Mode.HTML })
  ]
})

Answer 1

最新更新- 18.8.2022

这个问题现在已经用Vue!解决了

您可以找到修复这里的拉请求。

注意:下面的信息已过时，请参阅顶部的更新，以及下面的进度更新！

找到了这个错误的解决方案，但是请注意，这只是一个部分的解决方案，至少现在是这样。在撰写这篇文章时，您需要使用Vite的预发行版构建来解决这个问题。

在我的例子中，我只需要更新以下依赖项：

"@vitejs/plugin-vue": "3.0.0-beta.1",
"vite": "^3.0.0-beta.7",

您可能会遇到安装这些包时遇到的问题，因为其他包上存在版本要求，不允许安装Vite的3.x包，在这种情况下，只需运行以下命令：

rm -fr node_modules package-lock.json
npm install --force

在此之后，您应该能够同时构建和运行Vite，而不需要它(或Babel)抱怨装饰师。

坏消息是，在此之后，您可能会遇到其他新的错误，我认为需要在Vite和所有使用它的插件中修复这些错误/这些插件是您的特定项目所需要的。

更新- 21.7.2022

这个问题似乎来自于Vue的单文件组件编译器，现在他们的GitHub库中有一个悬而未决的问题：https://github.com/vuejs/core/issues/6318

此外，同一个人似乎已经解决了一个解决问题的拉请求，这个问题在这里仍然是开放的：https://github.com/vuejs/core/pull/6320

从上面的问题和拉请求来看，我们所看到的问题似乎是在export default ...之前使用修饰器而显式导致的，它没有被正确地重写/转换，从而导致了这个问题。

现在，我们要么需要等待，在本地进行更改，要么分叉我们自己的副本，并应用拉请求的修复，然后使用我们的分叉版本的证监会编译器。祈祷吧，这应该能治好它！

编辑：，我尝试了修复，并可以确认它的工作！下面是我现在如何将它应用到我的项目中，以防您(或其他人)想要尝试)。

更改package.json

"scripts": {
  "postinstall": "npm run patch-vue-compiler-sfc",
  "patch-vue-compiler-sfc": "patch --ignore-whitespace -p0 --forward < vue-compiler-sfc.patch || true"
}

创建一个名为vue-compiler-sfc.patch的新修补程序文件，内容如下：

--- node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js.orig    2022-08-02 12:54:51
+++ node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js 2022-08-02 16:10:06
@@ -3352,7 +3352,12 @@
     }).program.body;
     ast.forEach(node => {
         if (node.type === 'ExportDefaultDeclaration') {
-            s.overwrite(node.start, node.declaration.start, `const ${as} = `);
+            if (node.declaration.type === 'ClassDeclaration') {
+                s.overwrite(node.start, node.declaration.id.start, `class `)
+                s.append(`\nconst ${as} = ${node.declaration.id.name}`)
+            } else {
+                s.overwrite(node.start, node.declaration.start, `const ${as} = `)
+            }
         }
         if (node.type === 'ExportNamedDeclaration') {
             for (const specifier of node.specifiers) {

现在只需运行npm i，修补程序就会被应用，您的项目现在应该消除这个错误，即使只是临时的解决方案。