Stop eslint complaining about dynamic imports in create-react-app app

Question

The eslint rules that ship natively in CRA seem to not like dynamic imports. So in

...
// Lazy load
const Login = lazy(() => import('./Login'));
const LoggedInHome = lazy(() => import('./LoggedInHome'));
...

both of those imports get highlighted (though eslint isn't giving an error message).

What's the least disruptive way to fix this?

I'm running eslint 8.1.0 and react-scripts 5.0.0.

Probably this doesn't matter, but in case it does, eslint is run via ALE on vim.

Edit: My eslint config is as follows:

<my project>
├── .eslintrc.json
└─┬ views
  └─┬ <my react app>
    ├── package.json
    └── src
    ...

I don't believe there are any eslint configurations either further up or down the tree.

package.json:

...
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
...

.eslintrc.json:

{
    "env": {
        "browser": true,
        "node": true,
        "commonjs": true,
        "es2021": true
    },
    "plugins": [
    "prettier"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:json/recommended",
        "prettier"
    ],
    "parserOptions": {
        "ecmaVersion": 2020,
        "sourceType": "module"
    },
    "rules": {
    }
}

Answer 1

Does the same highlight happen in other code editors?

It might be a Vim situation.

Which syntax plugin for JavaScript are you using in Vim?

Some of the older syntax plugins don't do well with modern ES features.

Try plugins like YAJS along with ES.Next.Syntax.

ES.Next.Syntax supports dynamic imports, and works with YAJS.