How to resolve "Adjacent JSX elements must be wrapped in an enclosing tag" issue in Vue.js

user_3138375 0
Viewed 6091

I'm running a Vue.js project in WebStorm. For some reason I'm getting this ESLint error:

ESLint: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

for the following code:

<template>
    <div>

    </div>

</template>

<script>

enter image description here

As you can see in the screenshot, this happens on the <script> opening tag.

There are duplicate questions on React projects, but their answers don't apply to my Vue project.

Can anyone please help? Any help will be very appreciated.

Here is my .eslintrc.js:

module.exports = {
    "extends": ["vue", "standard"],
    "plugins": [
      "import",
      "vue"
    ],
};
eslint vue.js webstorm
1 Answers

Adding 'plugin:vue/recommended' to the .eslintrc.js solved my issue. Now my .eslintrc.js looks like this:

module.exports = {
    "extends": ["vue", "standard", "plugin:vue/recommended"],
    "plugins": ["import", "vue"],
};
user_31383750
Related