26

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 enter image description here

How can I solve it, please? Thank you.

Netanel Vaknin
  • 856
  • 2
  • 8
  • 21

4 Answers4

51

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

Lazar Nikolic
  • 4,261
  • 1
  • 22
  • 46
3

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.

Ashraful Islam
  • 1,228
  • 10
  • 13
2

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

user19638883
  • 21
  • 1
0

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.

sak2
  • 3
  • 2