admin管理员组

文章数量:1401765

After updating Vite I can't start my project anymore because I get the following error message:

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

Before the update everything was running without problems and also the log doesn't really help me. I use SFC in Vue and vue-class-ponent and vue-property-decorator for my ponents.

I have updated:

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

The problem occurs with both the "vite" and "vite build" scripts. The errors it finds seem to occur mainly in the part of the ponents:

// 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/ponents/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/ponents/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 |        }"

These are the dependencies currently installed:

// 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-posable": "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-ponent": "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-monjs": "0.5.2",
    "vite-plugin-i18n-resources": "1.0.3",
    "vite-plugin-package-version": "1.0.2",
    "vue-tsc": "0.38.1"
  },

My Typescript configuration:

// tsconfig.json

{
  "pilerOptions": {
    "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"
  ]
}

And my Vite configuration:

// 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,
        pilerOptions: {
          directiveTransforms: {
            "click-outside": ssrTransformCustomDirective,
            "safe-html": ssrTransformCustomDirective
          }
        }
      }
    }),
    i18nResources({
      path: resolve(__dirname, "./src"),
    }),
    loadVersion(),
    graphQlFile(),
    markdown({ mode: Mode.HTML })
  ]
})

After updating Vite I can't start my project anymore because I get the following error message:

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

Before the update everything was running without problems and also the log doesn't really help me. I use SFC in Vue and vue-class-ponent and vue-property-decorator for my ponents.

I have updated:

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

The problem occurs with both the "vite" and "vite build" scripts. The errors it finds seem to occur mainly in the part of the ponents:

// 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/ponents/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/ponents/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 |        }"

These are the dependencies currently installed:

// 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-posable": "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-ponent": "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-monjs": "0.5.2",
    "vite-plugin-i18n-resources": "1.0.3",
    "vite-plugin-package-version": "1.0.2",
    "vue-tsc": "0.38.1"
  },

My Typescript configuration:

// tsconfig.json

{
  "pilerOptions": {
    "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"
  ]
}

And my Vite configuration:

// 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,
        pilerOptions: {
          directiveTransforms: {
            "click-outside": ssrTransformCustomDirective,
            "safe-html": ssrTransformCustomDirective
          }
        }
      }
    }),
    i18nResources({
      path: resolve(__dirname, "./src"),
    }),
    loadVersion(),
    graphQlFile(),
    markdown({ mode: Mode.HTML })
  ]
})

• javascript
• typescript
• vue.js
• vuejs3
• vite

Share Improve this question Follow asked Jun 24, 2022 at 11:21 SaurielSauriel 6911 gold badge11 silver badge66 bronze badges 4

• Did you happen to solve this yet? Just noticed the same thing myself, but downgraded a few dependencies here and there, yet the error didn't go away. (and yes, I did nuke node_modules and package-lock.json in between) – Dids Commented Jul 1, 2022 at 14:53
• @Dids Not yet. I will let you know i solve it. – Sauriel Commented Jul 1, 2022 at 17:09
• Do you happen to be on an M1 Mac by any chance? Because I've reverted every dependency, Node.js and Vite/TypeScript config change since it last 100% worked, and it's still throwing the same error. But now I got to thinking, because the last time I worked on this, I was on an Intel Mac, while I'm now on an M1 Mac. EDIT: Never mind, tried it on a CI and it still fails. I'm stumped. – Dids Commented Jul 7, 2022 at 13:14
• This has now been fixed in Vue, see my updated answer below. – Dids Commented Aug 18, 2022 at 10:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

LATEST UPDATE - 18.8.2022

The issue has now been fixed in Vue!

You can find the pull request for the fix here.

---

NOTE: The information below is out of date, see the update at the top, as well as the progress updates below!

Found a solution to this particular error, but do note that this is only a partial solution, at least for now. At the time of writing this, you need to use Vite's pre-release builds, which fix the issue.

In my case, I only had to update the following dependencies:

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

You may run into issues trying to install these, as there are version requirements on other packages that do not allow Vite's 3.x package to be installed, in which case you can simply run the following:

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

After this, you should be able to both build and run with Vite, without it (or Babel) plaining about the decorators.

The bad news is that you may run into other, new errors after this, which I suppose need to be fixed in Vite and all the plugins that utilize it/which you need for your particular project.

---

UPDATE - 21.7.2022

The issue seems to be ing from Vue's single-file-ponent (SFC) piler, and there's now an open issue in their GitHub Repository: https://github./vuejs/core/issues/6318

Additionally, the same person seems to have worked out a pull request that fixes the issue, which is still open here: https://github./vuejs/core/pull/6320

Judging by the issue and pull request above, the issue we're seeing seems to be explicitly caused by using decorators before export default ..., which does not get rewritten/transpiled correctly, causing this issue.

Right now we'd either need to wait, make the changes locally or fork our own copy and apply the pull request's fixes, then use our forked version of the SFC piler. Fingers crossed, this should fix it for good!

EDIT: I tried the fix and can confirm that it works! Below is my how I applied it to my project for now, in case you (or anyone else) wants to try it).

Changes to package.json:

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

Create a new patch file called vue-piler-sfc.patch with the following contents:

--- node_modules/@vue/piler-sfc/dist/piler-sfc.cjs.js.orig    2022-08-02 12:54:51
+++ node_modules/@vue/piler-sfc/dist/piler-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) {

Now simply run npm i and the patch will be applied and your project should now be rid of this error, even if as only a temporary solution.

本文标签：