[Bug]: Error when trying to integrate the plugin to the eslint flat config file

[rimakan]

Kind of Issue

Question

Tool or Library

cspell/eslint-plugin

Version

8.15.5

Supporting Library

Not sure / None

OS

Linux

OS Version

22.04

Description

The ESLint cannot import @cspell/eslint-plugin for some reason

Steps to Reproduce

1. Migrate ESLint config file (eslintrc.json) to the flat config using ESLint CLI npx @eslint/migrate-config .eslintrc.json
2. Install the @cspell/eslint-plugin using your package manager (npm or yarn)
3. Integrate it in the newly created ESLint flat config file using the instuction
4. Restart VS Code
5. Open up the flat config ESLint file and check out ESLint output in VS Code
   

Expected Behavior

There are no errors

Additional Information

No response

cspell.json

No response

cspell.config.yaml

No response

Example Repository

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Jason3S]

I think this might be a yarn only issue.

[Jason3S]

@rimakan,

It is a yarn bug yarnpkg/berry#2476

There might be a work around by using: NODE_OPTIONS="--require .pnp.cjs" like this:
NODE_OPTIONS="--require .pnp.cjs" yarn eslint ..

You could also try importing .pnp.cjs from .eslint.config.js, that might work, but the above issue might keep it from working.

eslint.config.js

import './.pnp.cjs';
// ... the rest of your config.

I'm open to a PR if you find a good fix, there are docs https://yarnpkg.com/features/pnp

[rimakan]

@Jason3S , thank you for your input!

It didn't help to be candid.

What helps is to set nodeLinkers: node-modules in .yarnrc.yaml and reinstall deps to have node_modules but this is a weird solution because it violates the plug and play pattern of new Yarn versions. It is better not to do it.

[Jason3S]

@rimakan,

There is not much I can do. It really is a Yarn issue: yarnpkg/berry#6335

This plugin uses SyncKit to run the worker.

Please try yarn unplug @cspell/eslint-plugin and see if that works for you.

[Jason3S]

@rimakan,

A bit of information would be useful:

1. Node version
2. Yarn version

[rimakan]

@Jason3S ,

My bad, sure I will provide you with the info

Node: 20.13
Yarn: 4.5.0

Your workaround didn't work. I saw similar error to what I attached to the issue. This time I saw the issue but with SyncKit. I tried to install it and put to to "resolutions". It did not help me whatsoever :(

[Jason3S]

@rimakan,

I took the time to set it up and try it out. There are other tests to ensure cspell runs with Yarn, but I had not done that with the ESLint plugin.

I think the key thing to get it working is to ensure yarn generates the .pnp.loader.mjs file. Use the pnpEnableEsmLoader: true in .yarnrc.yml.

[rimakan]

@Jason3S ,

Thank you for your assistance. Your solution did not help me. I still see the very error

Do I need to install extra packages that may be dependencies for the plugin?

[Jason3S]

@rimakan,

Please start with a basic setup and see if it works.

Here is a SandBox Link

Please make an example that fails. As far as I can tell, it is working as expected.

[rimakan]

@Jason3S ,

I have just tried to reproduce the issue using an example project locally. I still see the issue.

You can check it out yourself by deploying it locally: https://github.com/rimakan/cspell-example-project

In order to deploy it locally, make sure you have corepack on your local machine

I think this may be caused by the config which is automatically created after executing the command npx @eslint/migrate-config .eslintrc.json to migrate to the flat config

Could you please try this.

1. In the project's folder create .eslintrc.json and fill it in with any working config
2. Run npx @eslint/migrate-config .eslintrc.json in the directory where your .eslint.json is located
3. Install all necessary packages that you see the terminal will suggest that you install after having executed p.2
4. Install the plugin
5. Try to integrate the plugin by using the instruction

[Jason3S]

@rimakan,

Thank you for the repo case, I'll take a look.

[Jason3S]

@rimakan,

The example breaks before cspell is even loaded.
It cannot find prettier, no-cycle, etc.

Do you have a working example that breaks only after cspell is added?

[rimakan]

@Jason3S ,

Have you installed dependencies? By running yarn install

If it doesn’t help, I’ll check it out

[Jason3S]

When I comment out all the rules that do not load, the spell checker works fine:

This is the eslint.config.mjs that works:

// @ts-check
import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
import react from "eslint-plugin-react";
// import prettier from "eslint-plugin-prettier";
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import reactHooks from "eslint-plugin-react-hooks";
import tsParser from "@typescript-eslint/parser";
import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";
import cspellPlugin from "@cspell/eslint-plugin";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all,
});

export default [
  ...fixupConfigRules(
    compat.extends(
      "eslint:recommended",
      // "plugin:@typescript-eslint/recommended",
      // "plugin:react-hooks/recommended",
      // "plugin:prettier/recommended",
    )
  ),
  {
    plugins: {
      // react,
      // prettier: fixupPluginRules(prettier),
      // "@typescript-eslint": fixupPluginRules(typescriptEslint),
      // "react-hooks": fixupPluginRules(reactHooks),
      "@cspell": cspellPlugin,
    },

    // languageOptions: {
    //   parser: tsParser,
    //   ecmaVersion: "latest",
    //   sourceType: "module",
    // },

    settings: {},

    rules: {
      '@cspell/spellchecker': ['warn', {}],
      // "import/no-cycle": [
      //   "error",
      //   {
      //     maxDepth: 10,
      //     ignoreExternal: true,
      //   },
      // ],

      // "no-restricted-imports": "off",

      // "@typescript-eslint/no-unused-vars": [
      //   "error",
      //   {
      //     ignoreRestSiblings: true,
      //   },
      // ],

      // "object-curly-spacing": [2, "always"],
      // quotes: ["error", "single"],
      // semi: ["warn", "always"],
      // "comma-dangle": ["error", "always-multiline"],

      // "space-before-function-paren": [
      //   "error",
      //   {
      //     anonymous: "always",
      //     named: "never",
      //     asyncArrow: "always",
      //   },
      // ],

      // "react/jsx-max-props-per-line": [
      //   1,
      //   {
      //     when: "multiline",
      //   },
      // ],

      // "no-console": [
      //   "error",
      //   {
      //     allow: ["info", "warn", "error"],
      //   },
      // ],
    },
  },
];

[Jason3S]

@Jason3S ,

Have you installed dependencies? By running yarn install

Yes, I did.

If it doesn’t help, I’ll check it out

Is everything checked into master?

[rimakan]

@Jason3S ,

Usual developer’s excuse is coming. It worked locally :)

I will double check because it really did work (I mean the rest things apart from cspell checker).

Also you have given me a brilliant idea. I will check it out as well.

P.S. I checked out your issue. My bad, sorry. I was commenting other packages out in order to test things.

[rimakan]

@Jason3S , the plugin works like a charm. I should not have paid attention to the eslint output in the VS Code. Once I ran yarn eslint, I saw that plugin told me about some unknown words

However, the issue is still present. It can really be a Yarn or even ESLint issue

Thank you so much for your assistance!

P.S. I fixed the repo's code. You can check out the problem above

[Jason3S]

@rimakan,

ESLint won't automatically reload in VSCode. You need to run: F1 - Restart Extension Host

[Jason3S]

Do you have the latest version of the ESLint plugin?

[rimakan]

@Jason3S ,

Yeah, I do. My ESLint plugin's version is 3.0.10 which seems to be the latest one bc VS Code does not suggest me updating it.

[mass2527]

@Jason3S
Did you fix this problem? I've been facing the same issue.

[Jason3S]

@mass2527,

Can you give more details? Are you seeing the issue when running eslint from the commandline or from VS Code?

[mass2527]

@Jason3S
Hello. Thank you for your help.

I tested your example.
When I run the command yarn lint, it displays typos in the terminal.
However, VS Code does not show a red squiggly line under the typos.

[Jason3S]

@mass2527,

This is an issue between Yarn and VS Code's ESLint extension. I'm not sure how to fix it. Related to yarnpkg/berry#6590

I'm able to reproduce it, but it is a pain to sort out. The issues seem to be related to how Yarn overrides require.resolve.

[mass2527]

@Jason3S
Okay, thank you for the information!