What am I doing wrong in my ESLint file so import will not be alerted?

Question

After reading a few Q&As regarding my issue of:

Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

• ignore ESLint error: 'import' and 'export' may only appear at the top level
• What is the correct way of using import and require in ES6?
• SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' - Wait what?

I wrote my .eslintrc.json to:

{
  "extends": ["airbnb", "prettier", "plugin:node/recommended"],
  "plugins": ["prettier"],
  "env": {
    "node": true,
    "es6": true,
    "browser": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 11,
    "sourceType": "module",
    "allowImportExportEverywhere": true
  },
  "rules": {
    "prettier/prettier": "error",
    "spaced-comment": "off",
    "no-console": "warn",
    "consistent-return": "off",
    "func-names": "off",
    "object-shorthand": "off",
    "no-process-exit": "off",
    "no-param-reassign": "off",
    "no-return-await": "off",
    "no-underscore-dangle": "off",
    "class-methods-use-this": "off",
    "prefer-destructuring": ["error", { "object": true, "array": false }],
    "no-unused-vars": ["error", { "argsIgnorePattern": "req|res|next|val" }],
    "semi": [2, "never"],
    "object-curly-spacing": [2, "always"]
  }
}

using the devDependencies of:

  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "eslint": "^6.4.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^6.3.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^1.7.0",
    "nodemon": "^1.19.3",
    "prettier": "^1.18.2"
  },

and also setting my engine:

  "engines": {
    "node": "^10"
  }

When I write a test module with Babel:

export default class Search {
  constructor() {
    alert('search test')
  }
}

I get the alert of:

Import and export declarations are not supported yet.eslint(node/no-unsupported-features/es-syntax)

Why are my settings not working? I could write an ignore of modules/ in an .eslintignore file but I'd like to know why I'm getting this alert and how I can resolve it correctly?

Answer 1

As @joan Gil said ,try to use "type":"module" on your package.json (as long as you are using node > 12)

Answer 2

There probably is a better way to do it but this worked for me.

{
  "extends": ["airbnb", "prettier", "plugin:node/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "spaced-comment": "off",
    "no-console": "warn",
    "consistent-return": "off",
    "func-names": "off",
    "object-shorthand": "off",
    "no-process-exit": "off",
    "no-param-reassign": "off",
    "no-return-await": "off",
    "no-underscore-dangle": "off",
    "class-methods-use-this": "off",
    "prefer-destructuring": ["error", { "object": true, "array": false }],
    "no-unused-vars": ["error", { "argsIgnorePattern": "req|res|next|val" }],
    "node/no-unsupported-features/es-syntax": [
      "error",
      {
        "version": ">=13.0.0",
        "ignores": ["modules"]
      }
    ],
    "import/extensions": [
      "error",
      {
        "js": "ignorePackages"
      }
    ]
  },
  "parserOptions": {
    "sourceType": "module"
  }
}

The key here is the rule 'node/no-unsupported-features/es-syntax'. All I am doing here is overriding this rule added by 'plugin:node/recommended' to allow ES modules syntax.

Answer 3

Check your .eslintrc file. It might be because of the node/recommended plugin. "extends": ["plugin:node/recommended"]

Answer 4

I Just had the same issue, removing "plugin:node/recommended" did it for me. Hope this helps!