如何解决“解析错误:此实验语法要求在Vue SFC中启用以下解析器插件之一：'jsx，flow，typescript'”
要解决"解析错误:此实验语法要求在Vue SFC中启用以下解析器插件之一：'jsx，flow，typescript'"的问题，需要在Vue的单文件组件（SFC）中启用适当的解析器插件。这个错误通常是由于使用了不支持的语法或缺少必要的插件导致的。
解决这个问题的方法是：
- 确保你的Vue项目中已经安装了相应的解析器插件。根据错误提示，你需要启用'jsx'，'flow'或'typescript'插件之一。你可以通过在项目根目录下的package.json文件中查看"devDependencies"或"dependencies"部分来确认是否已经安装了这些插件。
- 如果你没有安装相应的解析器插件，可以通过运行以下命令来安装它们：
- 如果你没有安装相应的解析器插件，可以通过运行以下命令来安装它们：
- 或
- 或
- 或
- 或
- 这些命令将安装所需的解析器插件，并将其添加到项目的开发依赖中。
- 安装完成后，你需要在项目的配置文件中启用相应的解析器插件。对于使用Vue CLI创建的项目，可以在项目根目录下的vue.config.js文件中添加以下配置：
- 安装完成后，你需要在项目的配置文件中启用相应的解析器插件。对于使用Vue CLI创建的项目，可以在项目根目录下的vue.config.js文件中添加以下配置：
- 如果你使用的是其他构建工具或自定义配置，请根据相应的文档添加相应的配置。
- 重新启动项目，应该就能够解决这个错误了。如果仍然存在问题，可以尝试清除项目的缓存并重新安装依赖：
- 重新启动项目，应该就能够解决这个错误了。如果仍然存在问题，可以尝试清除项目的缓存并重新安装依赖：
- 这将清除项目的缓存并重新安装所有依赖项。
总结起来，解决"解析错误:此实验语法要求在Vue SFC中启用以下解析器插件之一：'jsx，flow，typescript'"的方法是确保安装了相应的解析器插件，并在项目配置中启用它们。这样就能够正确解析Vue单文件组件中的语法，并消除这个错误。
相关·内容
我在一个Vue SFC模板中发现了这个奇怪的错误。 Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (1:0) (似乎是在Vue SFC <template>标签的开始标签上抛出的。) 这是Vue SFC (字面意思是股票的Vite App.vue文件) <template>
<img
alt="Vue logo"
sr
浏览 4025提问于2021-09-01得票数 1
我正在努力使我的更漂亮的工作正确。当我启动format-check ( js，ts文件上的prettier --check)时，尽管配置如下，但在许多类文件(甚至只有一个属性和getter的简单类文件)中都出现了SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties'错误。当我在.prettierrc.json中将解析器从默认更改为其他内容时，"@trivago/prettier-plugin-sort-imports"插件无法工作。
浏览 53提问于2020-12-14得票数 4
1回答
我已经设置了带有@babel/eslint-解析器和的eslint插件，但当我试图检查vue文件时，它会引发以下错误：
电话链接中的错误
1:0错误解析错误:此实验性语法要求启用以下解析器插件之一：'jsx，flow，typescript‘(1:0)
我是不是在我的设置中遗漏了一些东西，因为它在无vue文件上工作？
包：
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.16.0",
"eslint": "^8.2.0",
浏览 7提问于2021-11-09得票数 3
回答已采纳
在使用Laravel Mix时，是否可以在Vue单文件组件(SFC)中使用Typescript？
如果是这样，应该如何设置？
我目前使用的是Laravel Mix 5.0，Typescript 3.7.5和Vue 2.5.17。
我有一个用Typescript编写的文件组件，例如SingleFileComponent.vue
<template>
<div>
<ul
v-for="item in items"
v-bind:key="item.id">
<li&
浏览 17提问于2020-02-18得票数 0
//vue SFC
<div>
<slot myProp="myProp"></slot>
</div> //vue jsx
<div>
{this.$slots.default}//myProp???
</div> 我在jsx中使用vue。如何在jsx中传输myProp到this.$slots.default？
浏览 33提问于2021-04-07得票数 0
回答已采纳
可能类似于
当类方法定义为箭头函数时，Eslint高亮显示错误' method‘未定义。(no-undef)。简单的例子
class abc {
d = () => {
// method body
}
}
这里没有定义'd‘
我的.eslintrc配置
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended
浏览 8提问于2017-08-17得票数 4
回答已采纳
我正在尝试让组件在我的vue3项目中工作。
vue.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new MonacoWebpackPlugin({
languages: ['typescript']
})
]
}
}
然后按照说明将其导入到.vue文件中：
import Mo
浏览 44提问于2022-03-01得票数 0
//vue SFC
<component
:is="comp"
v-bind="props"
v-on="listeners"
></component>
如何在jsx中使用is、侦听器对象和属性对象？VUE 2
浏览 2提问于2021-04-07得票数 0
回答已采纳
1回答
我正在尝试汇总Vue组件库，它是在typescript + vue-property-decorator上编写的。我在一个单独的文件中有几个Vue组件和plugin类，这些组件被导入到这个文件中： import FormularioForm from '@/FormularioForm.vue'
import FormularioInput from '@/FormularioInput.vue'
import FormularioGrouping from '@/FormularioGrouping.vue' 测试套件(vue-cli + j
浏览 37提问于2020-10-11得票数 4
回答已采纳
我看到，在当前版本的中，它们支持标准js，但不幸的是，对于厄运emacs来说，情况并非如此，因为只有更漂亮的emacs可用。
我试图从他们的源代码中获取这个定义，并修改它以适应doom的修改，如：
(define-format-all-formatter standard
(:executable "standard")
(:install "npm install --global standard")
(:modes
(angular-html-mode "angular")
((js-mode js2-mode js
浏览 11提问于2022-06-06得票数 0
有时我们可以在defineComponent函数中使用props来提取常见的道具，如下所示。两者都适用于vue2/vue3，但不适用于SFC。
// common-props.js
export default {
commonProps: {
enabled: Boolean,
readonly: Boolean,
}
}
// my-component.vue
import { commonProps } from './common-props';
export default {
props: {
...commonProps,
浏览 3提问于2021-11-22得票数 2
我一直很难用Meteor，Vue，打字稿和更漂亮的语言来设置ESLint。我可以成功地解析和格式化类型记录文件，但是它会抛出.vue文件的语法错误。
ESLint相关依赖关系
"@babel/plugin-transform-typescript": "^7.12.1",
"@meteorjs/eslint-config-meteor": "^1.0.5",
"@types/meteor": "^1.4.64",
"@types/mocha": "^8.0.3",
&
浏览 4提问于2021-04-25得票数 6
1回答
我正在创建一个vue组件 但是我得到了以下错误 Type annotations can only be used in TypeScript files. 如果我删除了type子句，我就会得到 Missing return type on function. 该组件如下所示： <template>
<pre>Market:{{ market }}</pre>
</template>
<script>
import Market from "./Market";
export default {
浏览 64提问于2021-09-02得票数 0
回答已采纳
我用的是Vue.js (webpack + vueify)和TypeScript。ts配置似乎正在工作，但只适用于.ts文件。
例如，在tsconfig.json中
"compilerOptions": {
"strictNullChecks": false,
因此，strictNullChecks在.ts文件中工作得很好：
但不是在.vue
错误：
初始化器类型null不能分配给变量类型字符串。
TypeScript不会抛出编译错误，只有PhpStorm在检测配置时似乎有问题。
为了使我在tsconfig.json中的配
浏览 3提问于2017-08-08得票数 1
失败测试/Unit/example.spec.js测试套件未能运行
TypeError: Cannot read properties of undefined (reading 'getCacheKey')
at Object.getCacheKey (node_modules/vue3-jest/lib/index.js:13:19)
----------|----------|----------|----------|----------|-------------------|文件\% Stmts _|----------|----------|--------
浏览 5提问于2021-10-30得票数 2
2回答
我一直在将应用程序从Vue 2迁移到Vue 3：。我遇到了与道具及其类型有关的问题。似乎所有的道具类型都不知道根据“林特”。因为它在模板本身上没有显示任何错误。
例如。我有一个道具"cancelText“，定义如下：
cancelText: {
type: String as PropType<string>,
default: "",
},
然后我在计算属性中使用这个支柱，像这样：
cancelButtonText(): string {
return this.can
浏览 8提问于2022-06-02得票数 0
我试图将eslint-plugin-testing library添加到一个项目中，以捕获@testing-library/react测试中常见的错误。我已经跟踪了，但是我无法让它捕获测试文件中的错误。
例如，我手动打开no-debug规则，在一个.test.tsx文件中添加一个debug()语句，然后运行linter。它不会捕获文件中的任何错误。
如果我打破了其他插件的规则，它们就会被捕获，所以我怀疑我在配置中添加测试库插件的方式可能有问题。
package.json
{
"dependencies": {
"react": "16.12.
浏览 3提问于2020-05-15得票数 3
回答已采纳
1回答
设置
我有，在此期间我使用了“手动选择特性”来安装，其中我选择了以下内容(除了链接器)：
选择了 Babel、TypeScript、Vuex和Linter /格式化程序
选择的 2.x
类样式组件的No
是使用Babel与TypeScript (现代模式所需的，自动检测的填充，转换JSX)？
然后，我还安装了 (并且我验证了安装的Babel版本是7，因为这是jsx支持回购所必需的)。
在我的bable.config.js文件中，我添加了(没有替换vue-cli生成的内容) jsx请求的预置：
module.exports = {
presets: [
浏览 6提问于2021-07-16得票数 1
回答已采纳
我试图在ESLint中使用WebStrom，但它无法工作，并显示了一个错误：
ESLint:解析错误:这个实验性语法需要启用以下解析器插件之一：'jsx，flow，typescript‘(2:9)。
这是我的.eslintrc和package.json设置。我应该做些什么来修正错误？
package.json
{
"name": "raonair-frontend",
"version": "0.1.0",
"private": true,
"dependencies"
浏览 8提问于2021-08-06得票数 45
我使用Jest制作的代码库，但我找不到一种方法来运行导入组件的简单Vue3测试。这在使用Vue-cli创建的应用程序中工作得很好，但我找不到一种方法来让Jest在使用Vue3的Vue-Vite应用程序中工作。下面是我遇到的错误 FAIL docs/homepage.spec.js
● Test suite failed to run
Vue packages version mismatch:
- vue@3.0.0 (/var/www/html/my_project_vue3_vite/node_modules/vue/index.js)
- vue
浏览 50提问于2020-10-29得票数 3
回答已采纳
我目前正在将mdx集成到我的vue 3 typescript项目中。然而，在配置vue.config.js时，我得到了以下错误： yarn run v1.22.11
$ vue-cli-service serve
ERROR Error loading C:\Users\Jannik\Desktop\mdx-vue3\vue.config.js:
ERROR Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Jannik\Desktop\mdx-vue3\vue.config.js from C:\Users\Jannik
浏览 7049提问于2021-10-20得票数 0
回答已采纳
1回答
安装在package.json上
"babel-preset-flow": "^6.23.0",
"eslint-plugin-flowtype": "2.35.1",
"flow-bin": "^0.55.0",
"flow-typed": "2.1.5",
"standard-flow": "^1.0.0",
"babel-eslint": "8.0.0",
"eslint"
浏览 2提问于2017-09-21得票数 1
在Vue3中从标准<script>迁移到<script setup>时，会收到来自ESLint的大量警告。具体来说，在<script setup>中未使用的任何声明都会被@typescript-eslint/no-unused-vars标记。
一个典型的例子是：
WARNING in src/layouts/Infinote.vue:105:8
@typescript-eslint/no-unused-vars: 'NoteComponent' is defined but never used.
103 | import { Dat
浏览 3提问于2021-09-27得票数 3
VSCode在.tsx文件中使用AS关键字在类型断言上显示错误。然而，当我执行代码并在web浏览器上运行应用程序时，没有问题。
解析错误:意外标记，预期“；
我的eslint.rc
{
"parser": "babel-eslint",
"env": {
"es6": true,
"browser": true
},
"extends": [
"airbnb-typescript",
"airbnb/hook
浏览 2提问于2021-02-09得票数 4
回答已采纳
我通过vue cli创建项目，并提供以下选项: vue3、TS、JEST和add @JEST library/vue。我的package.json看起来像这样 {
"name": "todo-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-ser
浏览 30提问于2021-08-07得票数 0
2回答
VButton已经全球注册，可以直接在SFC <template>中使用，不需要在JSX/TSX中手动导入，如何使用？
// globally register `VButton`
Vue.createApp({...}).component('VButton', {...})
// ? have to import this, is there a way to
// use `VButton` without importing, since it's
// already registered globally.
import VButton from
浏览 123提问于2021-05-20得票数 1
回答已采纳
我的packageJSON
"devDependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@vue/compiler-sfc": "^3.0.11",
"axios": "^0.21",
"bo
浏览 48提问于2021-06-07得票数 1
1回答
我的babel配置有一些问题，不确定是什么.. 我看到的错误： ERROR Failed to compile with 1 errors friendly-errors 21:27:50
ERROR in ./.nuxt/client.js
浏览 19提问于2019-06-08得票数 4
我已经使用了TypeScript和Vue很长一段时间以下预设。这是可行的，但我还没有理解每一种选择，现在我将理解它。第一：parser和@typescript-eslint/parser有什么区别？
parser: vue-eslint-parser
parserOptions:
parser: "@typescript-eslint/parser"
sourceType: module
project: tsconfig.json
tsconfigRootDir: ./
extraFileExtensions: [ ".vue" ]
en
浏览 6提问于2021-04-22得票数 1
回答已采纳
在编写create-vue命令时，我使用命令创建了新的Vue项目。以下是我对问题的回答：
D:\checks>npm init vue@latest
Vue.js - The Progressive JavaScript Framework
√ Project name: ... VueQuestionJSX
√ Package name: ... vuequestionjsx
√ Add TypeScript? ... No
√ Add JSX Support? ... Yes
√ Add Vue Router for Single Page Application develop
浏览 12提问于2022-08-27得票数 0
回答已采纳
我通过CLI创建了一个vue3.0 + ts项目，当我添加vue.config.js时，它在require上总是有错误
const webpack = require('webpack');
const path = require('path');
错误是
module "d:/learning/vue-3-ts-demo/node_modules/webpack/types"
Require statement not part of import statement`.
我安装了webpack 5.65.0
我的packages.json
浏览 8提问于2021-12-09得票数 0
回答已采纳
我有以下package.json文件： {
"name": "view",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vu
浏览 52提问于2021-08-27得票数 2
回答已采纳
我试图在vite+vue3+typescript项目中使用jest。不幸的是，“无法找到模块”ts- jest /dist/config/config-set‘消息继续失败。
文件ts-jest/dist/config/config-set‘在我的nodeModules中不存在，但我不知道如何安装它。这将是解决这个问题的最简单的方法，我希望。
下面是我的package.json配置：
"dependencies": {
"@types/jest": "^29.1.0",
"@vue/composition-api"
浏览 3提问于2022-09-29得票数 0
我正在使用Vue(SFC简单文件组件)和使用vscode的typescript。我在d.ts文件中创建的类型不会应用/更新到.vue文件。当我重新加载窗口时，它们会被应用。这意味着每次更改d.ts文件时，我都必须重新加载vscode。
有人知道怎么解决吗？
谢谢,
浏览 3提问于2018-02-14得票数 1
我正在尝试使用以下命令下载graphql模式
apollo client:download-schema --endpoint=https://my-endpoint --header='x-hasura-admin-key: <my key>'
我收到一个错误：Error: Cannot find module 'graphql/validation/rules/UniqueTypeNames'
我在package.json中有以下依赖项和dev依赖项
"dependencies": {
"@apollo/cli
浏览 14提问于2021-10-30得票数 3
回答已采纳
1回答
嗯，在花了整整一天和10个小时的时间来尝试使用typescript之后，我不知所措，为什么它不能工作。
备注：
使用Laravel和webpack，全新安装，没有任何花哨的东西会破坏我在setting up所有普通.ts文件编译中看过的任何50+指南，但我不能在我的vue组件中使用。
Webpack.mix.js文件：
mix.js('resources/assets/js/app.ts', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
浏览 0提问于2018-06-14得票数 1
@typescript-eslint/no-unused-vars.有一个问题所以，我们有类型
type SomeType = (name: string) => void;
我们在字符串中有@typescript-eslint/no-unused-vars错误和类型声明，表示“名称”是定义的，但从未使用过。
类型使用示例：
export const LogSomeInfo: SomeType = (name: string) => {
const a = name;
console.log(a);
};
或者：
interface CheckboxPropsTyp
浏览 5提问于2020-09-06得票数 51
回答已采纳
我刚遇到一个皮棉难题，我需要你的帮助，知道该怎么做。我正在使用 $ yarn lint -v
yarn run v1.22.4
$ eslint . -v
v6.8.0 使用插件vue和@typescript-eslint，我在一个.ts文件中有以下代码： import Vue, { VNode } from 'vue';
export default Vue.extend ({
render(createElement): VNode {
return createElement('div',
{},
'Simp
浏览 95提问于2020-03-21得票数 1
我有漂亮的设置自动格式化.js，.vue和其他文件保存。但是，由于某些原因，它不会为.jsx文件触发。 单击状态栏中的"Prettier“项将显示： ["INFO" - 10:48:25 am] Enabling prettier for range supported languages
[
"graphql",
"javascript",
"javascriptreact",
"json",
"typescript",
"typescriptreact&
浏览 17提问于2020-06-15得票数 6
回答已采纳
我正在配置我的vue-cli项目(使用<script setup>的组合api )以完全支持TypeScript。每次在模板标记中使用变量时，VSCode都会给我带来错误。我正在使用Vue语言特性(Volar) v0.39.4插件。
我试过没成功：
vue-file-import.d.tstsconfig.json editsreloading 添加VSCode
示例：
// ../src/views/component-a/Main.vue
<template>
<div>
{{string}} // gives VsCode error: Pro
浏览 28提问于2022-08-01得票数 0
我的根dir结构是这样的：
srcutilstypesclientspackage.jsonetc.
我当前运行的babel配置如下：
{
presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react', '@babel/preset-flow'],
plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/transform-runtim
浏览 2提问于2020-07-27得票数 0
1回答
我正在尝试构建一个没有cli服务的vue 3项目(这只是一个webpack包装)。
package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint
浏览 2提问于2021-11-12得票数 0
回答已采纳
在更新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
浏览 38提问于2022-06-24得票数 4
3回答
Vue 3应用程序坏了/不会编译下面的包更新。更新前没有错误。
我收到以下节点控制台错误。
误差
"export 'createElementBlock' (imported as '_createElementBlock') was not found in 'vue'
"export 'createElementVNode' (imported as '_createElementVNode') was not found in 'vue'
"export 'no
浏览 0提问于2021-08-15得票数 13
3回答
我已经通过npx创建反应应用程序类型记录创建了应用程序。
由于babel抛出错误，我想使用一些带有名称空间的自动生成代码。
我试过的是：
取消了这个项目
更新babel/core至7.7
安装和配置
{
"name": "frontend2",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "
浏览 5提问于2019-11-09得票数 8
无论是TypeScript、Vue还是Node生态系统，我都不是很有经验。
我使用Vue 3和TypeScript创建了一个使用Vue CLI创建的工作设置，与vue create生成项目和配置的方式大致相同。如果我正确理解它，Babel将在我的"browserslist"中引用package.json配置，并添加多填充/重写代码来处理遗留浏览器。TypeScript编译器也有--target和--lib选项，这些选项似乎具有类似的功能。
我在Vue项目中编写的TypeScript代码是否被转换了两次，首先是TypeScript编译器，然后是Babel？如果是的话，是否有办法避
浏览 2提问于2021-02-22得票数 10
1回答
当我将我的vue项目(typescript)添加到工作区时，我似乎无法让Go to Definition (GTD)在vscode中工作。但是，如果项目仅作为独立/文件夹打开，则GTD将完美工作。当在工作区中使用类似的tsconfig文件对基于typescript的服务器端进行编程时，GTD可以完美地工作。
已经包含了工作区文件和tsconfig文件。此外，Vue项目由vue-cli v3创建。如果还有什么需要我提供的，请告诉我。
.vue文件中的这些导入就是一个例子：
import IProjectSlot from '@/interfaces/IProjectSlot';
浏览 1提问于2020-06-27得票数 0
问题：
Property 'projects' does not exist on type 'CreateComponentPublicInstance<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, {}, {}, false, OptionTypesType<{}, ... 4 more ..., {}>, ... 5 more ..., {}>'
由于某种原因，它在计算机上尖叫，你可以看到我的this.proj
浏览 18提问于2021-06-25得票数 11
回答已采纳
1回答
我正在使用Quasar v2，Vue 3，并且我正在尝试安装Pinia。每当我尝试运行：npm install pinia或npm install pinia@next时，都会出现以下错误： code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: ui@0.0.1
npm ERR! Found: vue@3.1.5
npm ERR! node_modules/vue
npm ERR! vue@"3.1.5" from @quasar/app@3.0.4
np
浏览 411提问于2021-11-10得票数 0
2回答
我正在尝试使用rollup和vuejs创建一个vue组件库。它与vue2一起工作，但无法用vue3解析css。我已经升级了package.json中的依赖项
package.json
{
"name": "vue2tslibrary",
"version": "0.1.59",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build
浏览 10提问于2020-10-20得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
