Ch1 - Book 1 - Linting issues

[andrewshrout]

1:1 error Definition for rule 'react/jsx-filename-extension' was not found react/jsx-filename-extension Constantly getting this error when I lint in the terminal.

Then I get this in the "output" on my VScode.

`Consider running eslint --debug D:\coding projects\saas\book\1-begin\app\server\app.ts from a terminal to obtain a trace about the configuration files used. [Error - 3:37:48 PM] Failed to load plugin '@typescript-eslint' declared in 'book\1-begin\app.eslintrc.js': Cannot find module '@typescript-eslint/eslint-plugin' Require stack:

• D:\coding projects\saas__placeholder__.js Referenced from: D:\coding projects\saas\book\1-begin\app.eslintrc.js Happened while validating D:\coding projects\saas\book\1-begin\app\server\app.ts This can happen for a couple of reasons:
  1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
  2. If ESLint is installed globally, then make sure '@typescript-eslint/eslint-plugin' is installed globally as well.
  3. If ESLint is installed locally, then '@typescript-eslint/eslint-plugin' isn't installed correctly.

Consider running eslint --debug D:\coding projects\saas\book\1-begin\app\server\app.ts from a terminal to obtain a trace about the configuration files used.`

I don't have either of the packages installed globally, the plugin name is correct in the file (its straight out of the book), and in the yarn.lock it says it resolved correctly.

[andrewshrout]

Completely switched from windows to Ubuntu and followed the guide to the letter. Still getting the same error.

[tima101]

@andrewshrout Does saas/book/1-end works as expected? Make sure that you configured dbaeumer.vscode-eslint extension properly on your VS Code editor. For example, check if you have this property in settings.json file:

https://github.com/async-labs/saas/blob/cb0c29eacfd5a26aaeeedac4f156986803872c4c/.vscode/settings.json#L24

If so and you still have problem, please share your exact code base with me in public repo. I attempt to reproduce. Thanks.

[andrewshrout]

https://github.com/andrewshrout/saas-book-course

@tima101 book/1-end works as expected. Maybe I can't figure out how to configure dbaeumer.vscode-eslint correctly. I installed it as the book said, and only altered the settings when the book said to.

My workaround that allowed me to mostly get through book 1 was to change "eslint.workingDirectories" [{"mode": "location"}] which has allowed me to actually progress.

There's something going on with all these small local directories because I run into tons of small errors if I just follow the book. Like for instance, in book 2, it couldn't find nprogress when I tried to import it (despite running yarn in book/2-begin). If I add it manually with yarn at that part, it will import it but there's no visible bar when testing the component in the try-catch-final part.

There's tons of little discrepancies as I work through the book which are very frustrating. Would appreciate any help! It must be in my config or setup.

For clarification - I've only worked up to middle of book2

[tima101]

@andrewshrout No problem. I will try to help out. Setting up ESLint can be confusing and it is part of nowadays configuration hell.

Please share with me an exact codebase that throws following error:

1:1 error Definition for rule 'react/jsx-filename-extension' was not found react/jsx-filename-extension

[andrewshrout]

https://github.com/andrewshrout/saas-book-course

@tima101 Just reverted that one change in settings, and the error is now back. To recreate the error, I just entered a random file ( I picked app/server/app.ts ), and it comes up in "problems" for VSCODE.

[tima101]

@andrewshrout You provided link to entire repo, to clarify, you want me to check this project

https://github.com/andrewshrout/saas-book-course/tree/master/book/1-begin/app

?

[andrewshrout]

Yes. @tima101

[tima101]

@andrewshrout I checked your project and was able to reproduce your problem.

Try updating content of .eslintrc.js file with:

module.exports = {
  settings: {
    react: { version: 'detect' },
  },
  parser: '@typescript-eslint/parser',
  extends: ['plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
  env: {
    es6: true,
    node: true,
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        trailingComma: 'all',
        arrowParens: 'always',
        printWidth: 100,
        semi: true,
      },
    ],
    '@typescript-eslint/camelcase': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    'react/no-unescaped-entities': 'off',
    'react/jsx-filename-extension': ['error', { extensions: ['.tsx'] }],
    '@typescript-eslint/no-explicit-any': 'off',
  },
  plugins: ['prettier', 'react'],
};

And also running inside 1-begin folder:

yarn add eslint-plugin-react --dev

Let me know if yarn lint command works now. You can add or remove --fix to script command and you can also save file with Ctrl + S to autofix ESLint problems.

[andrewshrout]

yarn lint fails with

   4:3  error  'React' must be in scope when using JSX  react/react-in-jsx-scope
   5:5  error  'React' must be in scope when using JSX  react/react-in-jsx-scope
   6:7  error  'React' must be in scope when using JSX  react/react-in-jsx-scope
   7:7  error  'React' must be in scope when using JSX  react/react-in-jsx-scope
   9:5  error  'React' must be in scope when using JSX  react/react-in-jsx-scope
  10:7  error  'React' must be in scope when using JSX  react/react-in-jsx-scope

✖ 6 problems (6 errors, 0 warnings)

error Command failed with exit code 1.

[tima101]

@andrewshrout Every .tsx file needs React imported:

import React from 'react';
import Head from 'next/head';

Add missing import to book/1-begin/app/pages/index.tsx

Did you remove it or was it missing? Thanks again.

[tima101]

@andrewshrout It was missing in Chapter 1 but present in Chapter 2. Thanks for reporting.

[andrewshrout]

Fixed. Thanks