eslint-plugin-tailwindcss: Upgrading to 3.8.1 causes "Failed to load parser '@typescript-eslint/parser'"

Firstly thanks for the great plugin.

Describe the bug I’m working on a Vue project. It’s hard to pinpoint exactly what’s causing this or dig deeper as running the lint fails, but I’m hoping something here triggers a thought. When updating to 3.8.1 this morning, my eslint runs started failing with Failed to load parser '@typescript-eslint/parser'. If I manually install that to see what happens, it errors about an Angular parser, but this project doesn’t use Angular.

Before starting a new feature, I updated:

eslint: 8.27.0 => 8.32.0 eslint-plugin-tailwindcss: 3.7.0 => 3.8.1 eslint-plugin-vue 9.7.0 => 9.9.0

The same versions of eslint and eslint-plugin-vue are used in another project without problems, but that project is only running eslint-plugin-tailwindcss 3.8.0.

Downgrading to 3.8.0 fixes the issue.

Environment (please complete the following information):

  • OS: macOS Ventura
  • Node: 16.13.1 (also tried 19.4.0)

eslint config file or live demo Video: https://share.cleanshot.com/Xbzbym9V

eslintrc:

module.exports = {
	root: true,
	env: {
		'node': true,
		'cypress/globals': true,
		'vue/setup-compiler-macros': true,
	},
	plugins: [
		'@babel',
		'cypress',
		'tailwindcss',
	],
	extends: [
		'eslint:recommended',
		'plugin:cypress/recommended',
		'plugin:jest-dom/recommended',
		'plugin:vue/vue3-recommended',
		'plugin:tailwindcss/recommended',
	],
	parserOptions: {
		parser: '@babel/eslint-parser',
	},
	overrides: [
		{
			files: ['**/tests/unit/**/*.spec.{j,t}s?(x)'],
			env: {
				jest: true,
			},
		},
	],
	rules: {
		'arrow-parens': ['error', 'as-needed'],
		'comma-dangle': ['error', 'always-multiline'],
		'computed-property-spacing': 'error',
		'guard-for-in': 'error',
		'indent': ['error', 'tab', { SwitchCase: 1 }],
		'lines-between-class-members': 'error',
		'max-params': ['error', 5],
		'no-alert': 'error',
		'no-await-in-loop': 'error',
		'no-bitwise': 'error',
		'no-confusing-arrow': 'error',
		'no-console': process.env.NODE_ENV === 'development' ? 'off' : ['error', { allow: ['warn', 'error'] }],
		'no-const-assign': 'error',
		'no-constant-condition': 'error',
		'no-debugger': process.env.NODE_ENV === 'development' ? 'off' : 'warn',
		'no-dupe-args': 'error',
		'no-dupe-class-members': 'error',
		'no-dupe-keys': 'error',
		'no-duplicate-case': 'error',
		'no-duplicate-imports': 'error',
		'no-empty-character-class': 'error',
		'no-empty-function': 'error',
		'no-empty': 'error',
		'no-eval': 'error',
		'no-ex-assign': 'error',
		'no-extra-boolean-cast': 'error',
		'no-extra-semi': 'error',
		'no-invalid-regexp': 'error',
		'no-irregular-whitespace': 'error',
		'no-labels': 'error',
		'no-lone-blocks': 'error',
		'no-loop-func': 'error',
		'no-loss-of-precision': 'error',
		'no-multi-spaces': 'error',
		'no-nested-ternary': 'error',
		'no-obj-calls': 'error',
		'no-prototype-builtins': 'error',
		'no-regex-spaces': 'error',
		'no-return-assign': 'error',
		'no-self-assign': 'error',
		'no-self-compare': 'error',
		'no-sequences': 'error',
		'no-setter-return': 'error',
		'no-sparse-arrays': 'error',
		'no-tabs': 'off',
		'no-template-curly-in-string': 'error',
		'no-this-before-super': 'error',
		'no-throw-literal': 'error',
		'no-trailing-spaces': 'error',
		'no-undef': 'error',
		'no-unexpected-multiline': 'error',
		'no-unneeded-ternary': 'error',
		'no-unreachable-loop': 'error',
		'no-unreachable': 'error',
		'no-unsafe-finally': 'error',
		'no-unsafe-negation': 'error',
		'no-unused-expressions': 'error',
		'no-unused-vars': 'error',
		'no-useless-catch': 'error',
		'no-useless-concat': 'error',
		'no-useless-escape': 'error',
		'no-useless-return': 'error',
		'no-var': 'error',
		'no-with': 'error',
		'padding-line-between-statements': ['error', { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*'}, { blankLine: 'always', prev: ['const'], next: ['let', 'var'] }, { blankLine: 'never', prev: ['singleline-const'], next: ['singleline-const'] }, { blankLine: 'never', prev: ['singleline-let'], next: ['singleline-let'] }, { blankLine: 'always', prev: '*', next: ['multiline-let', 'multiline-const'] }, { blankLine: 'always', prev: ['multiline-let', 'multiline-const'], next: '*' }, { blankLine: 'always', prev: '*', next: 'return' }],
		'prefer-arrow-callback': 'error',
		'prefer-const': 'error',
		'prefer-object-spread': 'error',
		'prefer-rest-params': 'error',
		'prefer-spread': 'error',
		'prefer-template': 'error',
		'quote-props': ['error', 'consistent-as-needed'],
		'require-await': 'error',
		'semi': ['error', 'always'],
		'space-before-function-paren': ['error', 'never'],
		'spaced-comment': ['error', 'always', { markers: ['/'] }],
		'tailwindcss/no-custom-classname': 'off',
		'use-isnan': 'error',
		'valid-typeof': 'error',
		'vars-on-top': 'error',
		'vue/attribute-hyphenation': ['error', 'always'],
		'vue/component-definition-name-casing': ['error', 'kebab-case'],
		'vue/custom-event-name-casing': 'off',
		'vue/html-end-tags': 'error',
		'vue/html-indent': ['error', 'tab'],
		'vue/max-attributes-per-line': ['error', { singleline: 20, multiline: 1 }],
		'vue/no-multi-spaces': 'error',
		'vue/no-v-html': 'off',
		'vue/require-prop-types': ['error'],
		'vue/require-valid-default-prop': ['error'],
		'vue/singleline-html-element-content-newline': ['error', {
			ignoreWhenNoAttributes: true,
			ignoreWhenEmpty: true,
		}],
		'yoda': 'error',
	},
};

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 28 (10 by maintainers)

Most upvoted comments

@francoismassart i tried deleting node_modules folder and reinstalling the dependencies. Everything works as expected!

Just to circle back, my team hasn’t had any issues, but we were using @typescript-eslint/parser in our ESLint config prior to the plugin changes.

Hope this helps. Thank you for your continued support!

I’m personally not getting any more errors using 3.8.2-beta.1! 🎉

Thanks for your help.

@Shuunen , the bundle size I’m talking about is the total bundle size of eslint-plugin-tailwindcss and its dependencies. By adding the default parsers in the preset, the code require them to be present as a dependency even if not used in the project…

I don’t think it is a best practice to define the parser in the preset, I might be wrong, I’m no eslint expert 😅

Apart from the bundle size aspect, the issue is that it will overwrite the optional existing parser setting:

eslintrc file parser => eslint-plugin-tailwindcss recommended preset

Let’s say you need 2 different parsers for the same file extension, I don’t know if this can be done…

@charkour Not for me, no. It moved the complaint to @angular-eslint/template-parser that @CosAnca is seeing - though I’m not running an Angular project.

The beta version from @francoismassart seems to remove that but allows the other issue to surface, but it looks like there’s progress there.