Parsing error: Cannot set property index of Error which has only a getter

[messenjer]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 8.52.0
• eslint-plugin-vue version: 9.18.0
• Node version: 18
• Operating System: Apple

Please show your full configuration:

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  overrides: [
    {
      files: ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'],
      extends: ['plugin:cypress/recommended']
    }
  ],
  rules: {
    'no-unused-vars': ['error', { varsIgnorePattern: '^_', argsIgnorePattern: '^_' }],
    '@typescript-eslint/no-unused-vars': [
      'error',
      { varsIgnorePattern: '^_', argsIgnorePattern: '^_' }
    ],
    'vue/no-v-html': 'off',
    'vue/multi-word-component-names': 'off',
    'vue/no-setup-props-destructure': 'off'
  },
  parserOptions: {
    ecmaVersion: 'latest'
  }
};

What did you do?

<script setup lang="ts">
import { ref } from 'vue';

const test = ref(<{ param: string; param2: string }>{ param: 'test', param2: 'test2' });
</script>

The code above is wrong. In the original code the type definition and the object instantiation are mixed together within the ref function call.

-const test = ref(<{ param: string; param2: string }>{ param: 'test', param2: 'test2' });
+const test = ref<{ param: string; param2: string }>({ param: 'test', param2: 'test2' });

The error message is :

0:0 Parsing error: Cannot set property index of Error which has only a gettereslint

What did you expect to happen?

A better message, with the problematic line.

Or simply find this issue by doing a google search with this error message. To understand that there is a syntax error in the code.

What actually happened?

[{
	"resource": "src/components/HelloWorld.vue",
	"owner": "eslint",
	"severity": 8,
	"message": "Parsing error: Cannot set property index of Error which has only a getter",
	"source": "eslint",
	"startLineNumber": 1,
	"startColumn": 1,
	"endLineNumber": 1,
	"endColumn": 1
}]

Repository to reproduce this issue

❗ If you don't share it for a few days, we silently close this issue.

[remiconnesson]

I get the same error but I don't know why. The code is able to run without crashing but I get this error in the linter.

I don't know the source.

[remiconnesson]

I get the same error but I don't know why. The code is able to run without crashing but I get this error in the linter.

I don't know the source.

Found the line by commenting everything and uncomment bit by bit until I find it.

const takeEnds = <T>(a: T[]): T[] => [a[0], a[a.length - 1]]

[FloEdelmann]

Reproduction: https://ota-meshi.github.io/eslint-plugin-vue-demo/#eJw9jsEKwyAQRH9l2YstFAo5JsYv8SLWBKGusm56Ef+9SUNzGXjwZpiGPr8Cjqir51gEapCtwNvROluUatFYiqlkFmjAYYEOC+cE6rMFNVmy5DNVAQl7zIdx0w2KY5dGqMKR1unE4c/QzWWoo6cel/HjQUG/79v6eZ4y2L85njll

This only happens with the default parser (espree). But since the code contains TypeScript syntax, a TypeScript-supporting parser has to be specified manually. See https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser for instructions how to do this.

[shawnlauzon]

This solved it for me, based on the link @FloEdelmann provided:

  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    requireConfigFile: false,
  },

I needed to add the parser option and then install that package and it showed me the real error.

[eric-gitta-moore]

Solved one problem, but brought about another.

xxx/Robot.vue
  189:12  error  Parsing error: '>' expected

As shown at the ^ position

const hintMsg = ref({
  text: [
    {
      renderMsg: () => (
        <div>
          <video
            src="./bgswn1iqqi-image.image"
         ^ loop
            autoplay
            muted
          />
        </div>
      ),
    },
  ],
});