bug: ESLint Error

[MattPereira]

Which method was used to setup Scaffold-ETH 2 ?

git clone, npx create-eth@latest

Current Behavior

Linter not working so i dont get squigles warning me of unused variables, imports, ect.

I do still get blocked from committing and get warnings explained when the lint script runs

Expected Behavior

Here is what it looks like on older version of scaffold when Linter works without error

Steps To Reproduce

Happens instantly with fresh clone and fresh npx create-eth@latest

Anything else?

The ESLint error logs

[Info  - 1:46:49 PM] ESLint server is starting.
[Info  - 1:46:49 PM] ESLint server running in node v20.9.0
[Info  - 1:46:49 PM] ESLint server is running.
[Info  - 1:46:50 PM] ESLint library loaded from: /home/matthu/Desktop/test/packages/nextjs/node_modules/eslint/lib/api.js
Pages directory cannot be found at /home/matthu/Desktop/test/pages or /home/matthu/Desktop/test/src/pages. If using a custom path, please configure with the `no-html-link-for-pages` rule in your eslint config file.
[Error - 1:46:52 PM] An unexpected error occurred:
[Error - 1:46:52 PM] Error: Cannot find package '@trivago/prettier-plugin-sort-imports' imported from /home/matthu/Desktop/test/noop.js
    at new NodeError (file:///home/matthu/Desktop/test/packages/nextjs/node_modules/prettier/index.mjs:16425:5)
    at packageResolve (file:///home/matthu/Desktop/test/packages/nextjs/node_modules/prettier/index.mjs:17366:9)
    at moduleResolve (file:///home/matthu/Desktop/test/packages/nextjs/node_modules/prettier/index.mjs:17406:18)
    at defaultResolve (file:///home/matthu/Desktop/test/packages/nextjs/node_modules/prettier/index.mjs:17497:16)
    at resolve2 (file:///home/matthu/Desktop/test/packages/nextjs/node_modules/prettier/index.mjs:17514:12)
    at importFromFile (file:///home/matthu/Desktop/test/packages/nextjs/node_modules/prettier/index.mjs:17529:16)
    at importFromDirectory (file:///home/matthu/Desktop/test/packages/nextjs/node_modules/prettier/index.mjs:22444:10)
    at importPlugin (file:///home/matthu/Desktop/test/packages/nextjs/node_modules/prettier/index.mjs:22456:12)
    at async loadPluginWithoutCache (file:///home/matthu/Desktop/test/packages/nextjs/node_modules/prettier/index.mjs:22460:18)
    at async Promise.all (index 0)

[technophile-04]

Ohh strange, I tried it with git clone and npx create-eth@latest and it seems to work for me in vscode and neovim too :

Neovim :

Vscode :

Maybe something to do with you vscode eslint extension?

Could you tell more on what extension are using and also which IDE are you using?

[MattPereira]

IDE is the latest version of Vscode 1.91.1

Extensions

• ES Lint by microsoft
• Error Lense

To get even more weird my nextjs/.eslintrc.json file is complaining about the typescript rules, even tho the file hasn't been touched in 9 months 🤔

Tried uninstalling to isolate both extensions but still riding the struggle bus 🥲

ES Lint

Error Lense

[MattPereira]

Prolly not cool enough to switch to make the switch to neovim yet 🤣

But very open to using a different extension if there are recommendations

[rin-st]

Hey @MattPereira !

Thanks for reporting this!
It doesn't work for me too, but I didn't even notice it 😄 since unused vars have less opacity and it's enough for me

Played with it a bit, and a simple solution that helped me is to remove "plugin:prettier/recommended" from .eslintrc.json + restart vscode

Possible cause:

• eslint-plugin-prettier can conflict with other plugins
• our eslint config file already deprecated (see first green block)

I will create PR with eslint config update next days, waiting for eslint-plugin-prettier to fix deprecated types.

ES Lint

I have this for a long time too, but it's just a warning :). Will fix it

[MattPereira]

It doesn't work for me too, but I didn't even notice it 😄 since unused vars have less opacity and it's enough for me

I think there are other benefits besides just the unused imports / vars. The linter being broken blocks out all warnings including missing dependencies in complex useEffect hooks

And if you miss a single warning the linter check will fail in the github action, which is a small annoyance requiring an extra commit to fix 🫠

[rin-st]

It doesn't work for me too, but I didn't even notice it 😄 since unused vars have less opacity and it's enough for me

I think there are other benefits besides just the unused imports / vars. The linter being broken blocks out all warnings including missing dependencies in complex useEffect hooks

And if you miss a single warning the linter check will fail in the github action, which is a small annoyance requiring an extra commit to fix 🫠

This worked for me, since it's eslint, not typescript-eslint.

Please check #904 . Is it working for you?

[anton-karlovskiy]

It doesn't work for me too, but I didn't even notice it 😄 since unused vars have less opacity and it's enough for me

I think there are other benefits besides just the unused imports / vars. The linter being broken blocks out all warnings including missing dependencies in complex useEffect hooks

And if you miss a single warning the linter check will fail in the github action, which is a small annoyance requiring an extra commit to fix 🫠

I agree!

[technophile-04]

Test snippet (paste this inside page.tsx in Home component :

  const [count, setCount] = useState(0);
  const [name, setName] = useState("shiv");
  // should get an eslint error
  const x = "shiv";

  useEffect(() => {
    setCount(count + 1);
    console.log(count);
    setName("shiv");
    console.log(name);
    // should get an eslint warning 
  }, [count]);

IDE is the latest version of Vscode 1.91.1

@MattPereira could you try upgrading the version to 1.92.0 ? Also could paste the details of your vs code? You could get them by doing :

cmd + shift + p and then search for "About", click "Help:About" it should show you an modal with all details.

Here are my details :

Version: 1.92.0 (Universal)
Commit: b1c0a14de1414fcdaa400695b4db1c0799bc3124
Date: 2024-07-31T23:26:45.634Z
Electron: 30.1.2
ElectronBuildId: 9870757
Chromium: 124.0.6367.243
Node.js: 20.14.0
V8: 12.4.254.20-electron.0
OS: Darwin arm64 23.5.0

I am using vscode 1.92.0 and it seems to work for me, so not sure how to reproduce it :(

working ss :

Ohh also could share your node version from vscode terminal by doing node --version ? And if its v20 could you try downgrading to v18? (Since I have v18 and everything works for me)

[rin-st]

Here are my details :

I have same details, but no underlines

for both node 18/20 (not sure it changes something)

[anton-karlovskiy]

Here are my details :

I have same details, but no underlines

for both node 18/20 (not sure it changes something)

I have the same details, but no warnings at all.

@technophile-04
It's really painful. Could you please fix this as quickly as possible? I'm scared to use react hooks especially useEffect. :(

[portdeveloper]

Version: 1.93.0-insider (user setup)
Commit: 39d98602020ddefe53ed217a8c50b9040673a737
Date: 2024-08-05T05:03:45.159Z
Electron: 30.1.2
ElectronBuildId: 9870757
Chromium: 124.0.6367.243
Node.js: 20.14.0
V8: 12.4.254.20-electron.0
OS: Windows_NT x64 10.0.22631

No warnings on my side as well.

And node --version
v22.5.1

[Pabl0cks]

Same here. No warnings but same details on hover

Versión: 1.92.0 (user setup)
Commit: b1c0a14de1414fcdaa400695b4db1c0799bc3124
Date: 2024-07-31T23:26:45.634Z
Electron: 30.1.2
ElectronBuildId: 9870757
Chromium: 124.0.6367.243
Node.js: 20.14.0
V8: 12.4.254.20-electron.0
SO: Windows_NT x64 10.0.19045

Node v20.11.0

[damianmarti]

No warnings here!

Version: 1.91.1
Commit: f1e16e1e6214d7c44d078b1f0607b2388f29d729
Date: 2024-07-09T22:08:12.169Z
Electron: 29.4.0
ElectronBuildId: 9728852
Chromium: 122.0.6261.156
Node.js: 20.9.0
V8: 12.2.281.27-electron.0
OS: Linux x64 5.4.0-190-generic

Node v18.17.1

[MattPereira]

My VS Code Details

Version: 1.92.0
Commit: b1c0a14de1414fcdaa400695b4db1c0799bc3124
Date: 2024-07-31T23:26:45.634Z
Electron: 30.1.2
ElectronBuildId: 9870757
Chromium: 124.0.6367.243
Node.js: 20.14.0
V8: 12.4.254.20-electron.0
OS: Linux x64 6.5.0-45-generic

Still no luck after switching to node v18 and restarting vscode

[anton-karlovskiy]

My VS Code Details

Version: 1.92.0
Commit: b1c0a14de1414fcdaa400695b4db1c0799bc3124
Date: 2024-07-31T23:26:45.634Z
Electron: 30.1.2
ElectronBuildId: 9870757
Chromium: 124.0.6367.243
Node.js: 20.14.0
V8: 12.4.254.20-electron.0
OS: Linux x64 6.5.0-45-generic

[ pool-creator ] $ node --version
v20.11.1
[ pool-creator ] $ nvm use 18
Now using node v18.18.2 (npm v9.8.1)

And still no luck after switching to node v18 and restarting vscode

As far as I'm concerned, VS code version or node version does not have to do with this issue. This has to be fixed code-wise.
cc @technophile-04

Could you please fix this issue as quickly as possible since I've paused using scaffold-eth-2 for this reason?
cc @MattPereira

[technophile-04]

Just update on this, was debugging with @MattPereira and seems like #875 is the culprit if he checks out to #869 i.e after clonning the main repo and then doing :

git checkout a78be8761e1d039218cccf57d60a4de56261d859 && yarn install

It does seem to solve the problem for him.

Would love if you guys could test it out.

Also if it doesn't work then maybe #904 would the way to go it seems

[technophile-04]

Thanks all! Closing this since it was solved in #905