not able to auto import react components from node modules

Question

I have recently started working with vs code. I am using material ui with react and type script. But I am not able to import the components of material ui using alt(option) + enter shortcut. I am using mac and the typescript version that I am using is 3.0.3. However, the react components that I am creating explicitly, those I am able to import using the above mentioned shortcut. Following is the package.json that I am using:

{
  "name": "portfolio",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "ahujru",
  "license": "ISC",
  "dependencies": {
    "@material-ui/core": "3.0.3",
    "@material-ui/icons": "3.0.1",
    "@types/material-ui": "0.21.5",
    "@types/react": "16.4.14",
    "@types/react-dom": "16.0.7",
    "awesome-typescript-loader": "5.2.1",
    "css-loader": "1.0.0",
    "node-sass": "4.9.3",
    "react": "16.5.1",
    "react-dom": "16.5.1",
    "sass": "1.13.4",
    "sass-loader": "7.1.0",
    "source-map-loader": "0.2.4",
    "style-loader": "0.23.0",
    "typeface-roboto": "0.0.54",
    "typescript": "3.0.3",
    "webpack": "4.19.0",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "3.1.8"
  }
}

and tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": ".",
        "module": "commonjs",
        "watch": true,
        "sourceMap": true,
        "outDir": "target",
        "target": "es6",
        "jsx": "react",
        "noImplicitAny": true,
        "moduleResolution": "node"
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

I have already installed plugins like npm intellisense, intellij keybindings and auto import but still nothings seems to happen. Could someone please tell me what am I missing here.

Answer 1

I believe I can reproduce the problem you are seeing. Based on my testing, the auto-import functionality built into VS Code only works for symbols defined in files that are already loaded as part of your project because they match, or are directly or indirectly imported by files that match, the include setting in tsconfig.json. (See this thread for some background.)

I started with your configuration files and a blank source file but removed @types/material-ui because it's for the old material-ui package (which you don't have installed) and is just confusing matters. At this point, if I invoke code completion with Ctrl-Space, I am not offered the Material UI components (AppBar, Avatar, ...). But if I add an import, for example import { AppBar } from "@material-ui/core";, that forces the TypeScript server to load @material-ui/core, so now if I invoke code completion again, I am offered the rest of the Material UI components. If you need auto import to work without an existing import, then you could add the appropriate .d.ts files to the include list in tsconfig.json, although then you'd want to use a separate tsconfig.json file for batch compilation so that you don't try to overwrite the JavaScript files in the @material-ui/core package.

I haven't tested any third-party auto-import plugins and can't speak about their behavior.