Some problems with Eslint and Typescript

[yuriazevedo11]

Hey @nandorojo, huge fan of your work here

I've created a repo using create-solito-app yesterday, but I'm having some issues. Maybe I'm missing something, but I don't have much knowledge on monorepos

Eslint

With Eslint, next/ has its own .eslintrc.js. How can I extend with my own config there? I do have my own Eslint npm package. One side note, running the nextjs app was not working until I added this:

module.exports = {
  extends: 'next',
  root: true,
  rules: {
    '@next/next/no-html-link-for-pages': ['error', 'apps/next/pages/'],
  },
};

Maybe this should be in the template?

Typescript

And with Typescript, my intellisense is a mess on Vscode. Some auto imports simply just not work.

Example: I just deleted MotiLink import from this template file, but Typescript can't find MotiLink to import

This was only one example, but I'm having this same problem with some other packages, depending from where I try to import them.

Currently, I've just added some devDependencies on root, like husky, lint-staged and commitlint for example.

Can you help me out?

[nandorojo]

hey! you mentioned a number of different questions here. i’ll try to answer later today

[nandorojo]

as for the autocomplete, i'm looking into how next/link etc does this. it's kinda complicated typescript stuff so i'll have to play with it, hopefully i can figure out a simple solution. typescript really doesn't document this well

[nandorojo]

With Eslint, next/ has its own .eslintrc.js. How can I extend with my own config there?

Doesn't this work?

{ "extends": ["next", "your-config-here"] }

[yuriazevedo11]

About the Eslint, I'm having some conflicts between my config and 'next', I'll take a deeper look

What about @next/next/no-html-link-for-pages rule? Nextjs app wasn't running before this rule was added

About the Typescript autocomplete, let me know if you find out something 👍

[nandorojo]

What isn’t working without that rule? Building? Can you please clearly outline reproducible steps?

[yuriazevedo11]

yarn web wasn't working for me without this rule

[yuriazevedo11]

I did a clean install, removing node_modules. Seems to be working without this rule now

[nandorojo]

worked fine for me without the rule in a fresh app

[yuriazevedo11]

Yeah, I guess Eslint was my bad

I'm just missing now the Typescript autocomplete, can you reproduce this problem?

[nandorojo]

yes, and i think i found the solution

[nandorojo]

can you try upgrading solito to 0.0.25 and see if that fixes it?

[yuriazevedo11]

It worked 🚀

Still having this problem tho, but I guess is not a big deal:

There's still some problems for me:

This one is pretty bad, I'd like to autocomplete the screens import here

This one is not that bad, because the imports of screens will be in packages/app/navigation/native

But inside packages/app/navigation/native, the autocomplete only shows apps/next/pages, not the packages/app/features

Do you have any clue how to fix these? Specially screenshot 2 and 4

[nandorojo]

yeah, to fix those, you’d need to install solito in apps/next too. this is a constraint of typescript monorepos. i’ve written about it here:

https://github.com/nandorojo/ts-monorepo-autoimport-guide

generally this shouldn’t matter, since almost all of your code should be written in the app folder. but you can solve it with the guide i linked to there

[yuriazevedo11]

Thanks! Nice guide :)

What about screenshots 2 and 4? I really do miss these autocomplete imports from packages/app/*

[nandorojo]

i don’t get screenshot 2. you’re writing export default of a variable that doesn’t exist. if you’re trying to re-export a screen, that’s the wrong syntax

[nandorojo]

for 4, don’t use the same name when exporting in next?

also, in general, use named exports, not default ones

[yuriazevedo11]

Sugestion for 4 works 🚀 . And I do use named exports only, but next/pages need export default

About screenshot 2, I can work around it. I just wanted autocomplete for the screen I'll need to re-export in next/pages, but it does not work

Thank you so much for your help, keep up the good work :D

[nandorojo]

Hey I think I solved the ESLint issue in this commit btw! https://github.com/nandorojo/solito/commit/610be58de58a81911a8ce8a7c227c070be16c258

I updated the root lint file and deleted the linter file in apps/next (though you don't have to do that).