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

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": {
    }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source