VS Code not providing suggestions for imports (Next JS, Javascript)

Question

I've spent the last hour trying to get this working and I can't find a solution. I have a component at ./components/layout/Layout.js.

I'm using this component in ./pages/_app.js. However, while eslint sees that I haven't imported it, it doesn't offer a suggestion to autoimport it (in the quick fix menu). I would like to be able to click quick fix and see the suggested import, as I get in Typescript projects (if this is even possible with JS.)

Here is my jsconfig.json:

 {
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "jsx": "react",
    "noImplicitAny": false,
    "paths": {
      "components/*": ["./components/*"]
    }
  },
  "exclude": ["node_modules"]
}

and this is my eslintrc.js:

module.exports = {
  env: {
    commonjs: true,
    node: true,
    browser: true,
    es6: true,
    jest: true
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  globals: {},
  parser: 'babel-eslint',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: ['react', 'import', 'react-hooks'],
  ignorePatterns: ['node_modules/'],
  rules: {
    'react/react-in-jsx-scope': 0,
    'react/prop-types': 0
  },
  settings: {
    'import/resolver': {
      alias: {
        map: [['components', './components']]
      }
    },
    react: {
      version: 'latest' // "detect" automatically picks the version you have installed.
    }
  }
};

It would be really great if someone could offer some suggestions for the configs here. As I've said, I've trawled through Google for a long time and haven't been able to get it working.

Many thanks

Answer 1

Update tsconfig.json

add either

"checkJs": true

or

"allowJs": true

under compilerOption in tsconfig.json to get the suggetions in.

post update just reload the vs code