How to solve Eslint - Module.createRequire is not a function error?

Question

I'm using react app with Parcel bundler & TypeScript. I'm trying to use ESLint but I get this error:

ESLint: Initialization error (ESLint). Module.createRequire is not a function.

versions:

• IDE: Webstorm
• Node Version: 16.6.2
• NPM Version: 7.20.3
• I don't have ESLint installed globally in my machine

This is my setup:

package.json:

{
  "name": "app-boilerplate",
  "version": "1.0.0",
  "description": "",
  "source": "public/index.html",
  "scripts": {
    "start": "parcel --port=3000 --open --lazy",
    "build": "parcel build",
    "lint": "eslint . --ext .tsx,.ts",
    "lint:fix": "eslint . --ext .tsx,.ts --fix",
    "test": "jest --coverage --passWithNoTests",
    "test:watch": "jest --watchAll --coverage",
    "prepare": "husky install",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@parcel/transformer-svg-react": "^2.2.0",
    "@storybook/addon-actions": "^6.4.13",
    "@storybook/addon-essentials": "^6.4.13",
    "@storybook/addon-links": "^6.4.13",
    "@storybook/react": "^6.4.13",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@types/jest": "^27.4.0",
    "@typescript-eslint/eslint-plugin": "^5.9.1",
    "@typescript-eslint/parser": "^5.9.1",
    "babel-loader": "^8.2.3",
    "eslint": "^8.7.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "eslint-plugin-storybook": "^0.5.5",
    "husky": "^7.0.4",
    "jest": "^27.4.7",
    "parcel": "^2.2.0",
    "prettier": "^2.5.1",
    "ts-jest": "^27.1.3",
    "typescript": "^4.5.4"
  },
  "dependencies": {
    "@types/node": "^17.0.8",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "alias": {
    "@hooks": "./src/hooks",
    "@libs": "./src/libs"
  }
}

.eslintrc.json:

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb",
        "prettier",
        "plugin:storybook/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": "./tsconfig.json",
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint",
        "jsx-a11y"
    ],
    "rules": {
        "import/extensions": [2, "never"],
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx", ".ts"] }],
        "react/jsx-indent": [2, 2, {"checkAttributes": true, "indentLogicalExpressions": true}],
        "react/react-in-jsx-scope": "off",
        "no-console": "off"
    },
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        }
    }
}

The actual error inside Webstorm

How can I solve it, please? Thank you.

Answer 1

I had the same issue. Tried in Webstorm terminal following commands: nvm current (I use nvm) and node -v. Both of these commands returned 16.14.0.

But the issue only went away when I changed default used version of node in Webstorm editor itself. You can do this by pressing CTRL + ALT + S. Then select Languages & Frameworks and after that Node.js. Value for Node interpreter: was there 10 and I switched it there to 16.14.0. If you do not have this version od nodejs installed on your machine, I suggest you use nvm (node version manager).