Nextjs에서 import 오류가 발생한다면?

상황

Next.js 12버전을 사용하여 개발하던 중 이런 오류가 나왔다!

// 오류 1
Parsing error: ESLint was configured to run on `<tsconfigRootDir>/pages/signUp.tsx` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-fileeslint

// 오류 2
The error message suggests that the current ESLint configuration is set to run on a specific TypeScript configuration file (tsconfig.json), but the file pages/signUp.tsx is not included in that configuration. To fix this issue, you have a few options:

Change ESLint's list of included files to exclude pages/signUp.tsx from linting.
Update the tsconfig.json file to include pages/signUp.tsx.
Create a new TypeScript configuration file that includes pages/signUp.tsx and update the ESLint configuration to use the new file.

// 오류 3
'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts

yarn dev로 실행하는데에는 문제가 없었지만 eslint로 빨간 줄이 나오고 있어 수정하고 싶었다!

나는 /pages/signup.tsx 파일을 사용하고 있었는, vsc의 openEditor에서 계속해서 signUp.tsx 파일을 읽는 것 같았다.
(기존 signUP.tsx->signup.tsx 로 이름을 바꿔서 그런 것 같다.)

해결

vsc를 계속해서 종료했다가 다시 켜보고, 등등 여러 해결법을 찾아서 해결했는데!

React를 import 하라는 오류는

// tsconfig.json
{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
    ...
  },
}

이 코드를 작성하니 해결되었고,
그리고 종료하고 다시 시작해보니.. 나머지 오류도...? 해결되었다!

.eslintrc.json에 "files": ["*.ts", "*.tsx"] 이런 코드도 추가하였는데, 이 부분은 아닌 것 같다.
그리고 맥 기준 Cmd + Shift + P로 Command Palette를 열어서 TypeScript: Restart TS Server도 실행하였다!

한 번에 여러 부분을 수정하면서 정확하게 어떤 해결법인지는 모르겠으나, 파일명이나 다른 부분에서 오류가 발생한다면 컴파일러 옵션을 바꾸고, TS 서버를 재시작 해보자!