future-architect / eslint-plugin-vue-scoped-css

ESLint plugin for Scoped CSS in Vue.js
https://future-architect.github.io/eslint-plugin-vue-scoped-css/
MIT License
98 stars 10 forks source link

Class extends value undefined is not a constructor or null #196

Open Julien-Aubert-Housfy opened 2 years ago

Julien-Aubert-Housfy commented 2 years ago

Getting the following error installing the plugin:

TypeError: Failed to load plugin 'vue-scoped-css' declared in '.eslintrc.js': Class extends value undefined is not a constructor or null

Here's my eslintrc.js file:

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
    },
    extends: [
        'plugin:vue/essential',
        'eslint:recommended',
        'plugin:vue-scoped-css/recommended',
    ],
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 'latest',
        sourceType: 'module',
    },
    plugins: ['vue', '@typescript-eslint'],
    rules: {
        'import/order': 'off',
        'vue/no-v-html': 'off',
        'vue/no-unused-components': 'off',
        'no-unused-vars': 1,
        'no-undef': 2,
        'prefer-const': 2,
        'no-console': 0,
        'standard/computed-property-even-spacing': 'off',
        'object-shorthand': 'off',
        'vue-scoped-css/enforce-style-type': 'warn',
    },
}

I tried installing the plugin in a couple projects of mine and I still get the same error. Any idea what could be causing this?

ota-meshi commented 2 years ago

Thank you for posting this issue. I can't reproduce your problem. Can you share a minimal repository that can reproduce your problem?

Julien-Aubert-Housfy commented 2 years ago

Thanks for the quick reply. Here's a repo where you'll be able to reproduce the issue: https://github.com/Julien-Aubert-Housfy/issue-plugin

ota-meshi commented 2 years ago

Thank you for for sharing the repository.

It seems that you need to install the latest version of postcss yourself. This requires postcss-scss to postcss@^8, but the dependency you use seems to use postcss@7.0.39.

eslint-plugin-vue-scoped-css defines postcss@^8.2.4 as a dependency, but it seems that it can not be solved well because it is placed in the node_modules directory of the lower layer. I think this is strictly a postcss-scss dependency issue.

Julien-Aubert-Housfy commented 2 years ago

Plugin is working as it should after installing the latest version of postcss and postcss-scss. Thank you very much for your help!