purple blackP
Reactiflux4y ago
15 replies
purple black

autoimports of react or next in vscode

I've got a nextjs project with framer motion.

Every time I want to import react hook I can’t just type useState and press control + space for import suggestions, I get only snippets suggestions when tooltip shows up.

In the contrary when I try to use a hook from framer motion library I get all available suggestions for its imports.

I’m using typescript

Here’s package json

": {
"@mdx-js/loader": "^2.2.1",
"@mdx-js/react": "^2.2.1",
"@next/font": "13.1.1",
"@next/mdx": "^13.1.1",
"@types/node": "18.11.18",
"@types/react": "18.0.26",
"@types/react-dom": "18.0.10",
"clsx": "^1.2.1",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
"framer-motion": "^8.3.4",
"gray-matter": "^4.0.3",
"next": "13.1.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"sass": "^1.57.1",
"typescript": "4.9.4"
}

Tsconfig

compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"include": ["next-env.d.ts", "/*.ts", "/*.tsx"],
"exclude": ["node_modules"]
Solution
VSCode - restart TS server command helped
Was this page helpful?