[Solved] ESlint - Error: Must use import to load ES Module

Problem:

While trying to set up a boilerplate with React, Typescript, styled components, webpack, etc getting an error when trying to run eslint:

Error: Must use import to load ES Module

In package.json the babel-eslint version the program using is,

"babel-eslint": "^10.0.2"

Solution:

The error occurred because the version you are using is deprecated and the updated version does not support ES6 modules. So the program needs to be updated to the latest babel-eslint-parser.

To update to latest babel-eslint-parser you have to follow the below steps:

• In package.json, update the line "babel-eslint": "^10.0.2", to "@babel/eslint-parser": "^7.5.4",. This works with the code above but it may be better to use the latest version.
• Run npm i from a terminal in the folder
• In .eslintrc, update the parser line "parser": "babel-eslint", to "parser": "@babel/eslint-parser",
• In .eslintrc, add "requireConfigFile": false, to the parserOptions section (underneath "ecmaVersion": 8,) (I needed this or babel was looking for config files I don't have)
• Run the command to lint a file

Thank you for reading the article. If you have any suggestions please comment below.