Skip to content

JSX cannot be resolved in Vue and Ts #1124

Closed
@doubleKGe

Description

@doubleKGe

What code were you trying to parse?

<script lang="tsx">
import Vue from 'vue'
import { mapMutations } from 'vuex'
import { Component } from 'vue-property-decorator'

@Component({
    created () {
        this.toggleHeader(false)
    },
    methods: {
        ...mapMutations(process.env.APP_SCOPE_NAME as string, ['toggleHeader'])
    }
})
export default class Error extends Vue {
    render (): JSX.Element {
        return (
            // An error occurred in the next line: "Parsing error: '>' expected.eslint"
            <div class="mg-notFound">
                <div class="fixed-center text-center">
                    <p>
                        <img
                            src={require('@/assets/sad.svg')}
                            style="width:30vw;max-width:150px;"
                        />
                    </p>
                    <p class="text-faded">Sorry, nothing here...<strong>(404)</strong></p>
                    <q-btn
                        color="secondary"
                        style="width:200px;"
                        onClick={() => this.$router.replace('/')}
                    >Go back</q-btn>
                </div>
            </div>
        )
    }
}
</script>

and my eslintrc.js

module.exports = {
    plugins: ['vue', '@typescript-eslint'],
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2018,
        sourceType: 'module',
        ecmaFeatures: {
            experimentalObjectRestSpread: true,
            jsx: true,
            globalReturn: true
        },
        extraFileExtensions: ['.vue']
    },
    root: true,
    env: {
        node: true
    },
    extends: [
        'plugin:vue/base',
        "plugin:@typescript-eslint/eslint-recommended",
        'plugin:@typescript-eslint/recommended',
        'plugin:vue/essential',
        '@vue/standard',
        '@vue/typescript'
    ],
    rules: {
        // eslint rules
        'one-var': 0,
        'arrow-parens': 0,
        'generator-star-spacing': 0,
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        'no-console': 0,
        'semi': [2, 'never'],
        "quotes": [2, "single"],
        'no-extra-semi': 2,
        'space-before-function-paren': 0,
        'eqeqeq': 2,
        'spaced-comment': 0,
        'no-useless-escape': 0,
        'no-tabs': 0,
        'no-mixed-spaces-and-tabs': 0,
        'new-cap': 0,
        'camelcase': 0,
        'no-new': 0,
        'indent': [2, 4],
        'no-multiple-empty-lines': [2, { 'max': 1, 'maxEOF': 2 }],
        'space-before-function-paren': [2, "always"],
        'comma-spacing': [2, { 'before': false, 'after': true }],
        'no-redeclare': [2, { builtinGlobals: true }],
        'curly': [2, 'multi-line'],
        'prefer-const': 0,
        'keyword-spacing': 0,
        // typescript-eslint rules
        '@typescript-eslint/indent': ['error', 4],
        '@typescript-eslint/explicit-function-return-type': 0,
        '@typescript-eslint/no-triple-slash-reference': 0,
        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/no-angle-bracket-type-assertion': 0,
        '@typescript-eslint/triple-slash-reference': 0,
        '@typescript-eslint/consistent-type-assertions': 0,
        '@typescript-eslint/member-delimiter-style': 0
    }
}

my tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "noImplicitAny": false,
        "allowJs": true,
        "baseUrl": "./",
        "outDir": "./dist",
        "rootDir": "./src",
        "paths": {
            "assets/*": [
                "src/assets/*"
            ],
            "http/*": [
                "src/api/http/*"
            ],
            "components/*": [
                "src/components/*"
            ],
            "*": [
                "types/*"
            ],
            "@/*": [
                "src/*"
            ]
        },
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ]
    },
    "include": [
        "src/*.vue",
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "tests/**/*.ts",
        "tests/**/*.tsx"
    ],
    "exclude": [
        "lib/*",
        "node_modules",
        "./dist"
    ]
}

What did you expect to happen?
I think it will pass by eslint
What actually happened?
Parsing error: '>' expected. eslint
Versions

package version
@typescript-eslint/parser 2.5.0
TypeScript 3.6.4
ESLint 5.16.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinghas prthere is a PR raised to close thispackage: typescript-estreeIssues related to @typescript-eslint/typescript-estree

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions