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.

Aurar

This means that Node version in use is too old. It's certainly not 16. Try to isolate the problem first and run lint command directly, not through ide – Brigette

Same issue I'm facing any solution? – Distrain

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).

Stringendo

I would recommend also this solution to integrate it with NVM: medium.com/@danielzen/… – Naara

This should be an accepted answer, thank you! – Viaticum

Explained in details, working solution. Thanks! – Gaucherie

Need to add 1 thing: in WebStorm there are 2 places the node version needs set: once under Node.js settings and again under the TypeScript settings. – Romina

Perso, when in PHPStorm I changed the version of Node in settings, it also got changed for TypeScript. – Goatsucker

Worked for me with version 18.0.0.0 – Abrego

worked for me with Intellij in 2023 – Et

Answer 2

Simply updating your node version will resolve the issue. You can try Node 14 or 16 version.

Although you are saying using Node 16.6.2 but definitely it's not been used when you are running the script.

Farmyard

Answer 3

It is the problem of Node version, just update the Node to the correct version. https://eslint.org/docs/latest/user-guide/migrating-to-8.0.0 enter image description here

Slue

Answer 4

In my case the issue happened because I had created the project on WSL Ubuntu, so the solution was to (so adding on to Lazar's answer, in a way) change WebStorm's Node interpreter to WSL. Click on the ... and then + to add the Node/NPM installed on your WSL distros in case it doesn't show in the drop down list of interpreters.

Unlatch