VSCode Auto-completes Imports with "/dist/" that cause error

[FunctionDJ]

In a JSX/TSX (React) file, if I start to type e.g. <AnimatePres, I get auto-complete resulting in this import line:

import { AnimatePresence } from "motion/dist/react";

Running this code with Vite as the bundler however causes this error:

[plugin:vite:import-analysis] Missing "./dist/react" specifier in "motion" package

If I remove dist/ from all such imports (i.e. `from "motion/react"), the error goes away and types also still work.
Maybe this is a misconfiguration on my end. Here is my Vite config:

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

And here is my tsconfig.json:

{
	"compilerOptions": {
		"target": "es2024",
		"lib": ["DOM", "DOM.Iterable", "ESNext"],
		"strict": true,
		"module": "esnext",
		"resolveJsonModule": true,
		"moduleResolution": "node",
		"noEmit": true,
		"jsx": "react-jsx"
	},
	"include": ["controller", "backend", "trpcClient.ts", "scoreboard"]
}

Can I either change my VSCode auto-complete to use the correct paths (without dist) or alternatively make the currently suggested paths (with dist) work as imports?

[Rafael-Bessa]

Hello!

That is a very common and frustrating issue when mixing VSCode's TypeScript heuristics with modern bundlers like Vite, especially when packages have internal /dist/ paths. Your diagnosis is correct: you want the imports without /dist/.

The problem is that your VSCode/TypeScript configuration is likely using an outdated module resolution setting that doesn't accurately mimic how Vite resolves modules.

The Recommended Solution: Update Module Resolution

The most elegant and professional solution is to update your tsconfig.json to use a modern module resolution strategy that aligns perfectly with Vite and ESM environments.

Change your moduleResolution setting from "node" to "bundler":

// tsconfig.json

{
	"compilerOptions": {
		// ... other options
		"module": "esnext",
		
		// 🔑 CHANGE THIS LINE:
		"moduleResolution": "bundler", 
		
		"noEmit": true,
		"jsx": "react-jsx"
	},
	// ...
}
Why this works:
When you use "moduleResolution": "bundler", TypeScript switches to a mode specifically designed to follow the resolution logic used by tools like Vite, Webpack, and Rollup. This forces VSCode to:

Honor the package's exports map (the modern way packages define which paths are public).

Stop pointing to the internal /dist/ directory, and instead suggest the public export path (e.g., "motion/react").

After making this change, restart VSCode (or reload the window) for the language server to pick up the new tsconfig.json settings. Your auto-completion should then use the correct paths.

This approach fixes the root cause and is the clean, modern standard for React/Vite/TypeScript projects.

Hope this resolves your auto-completion and bundling errors! If this fixes the issue, please mark this comment as the correct answer.

[FunctionDJ]

Thank you very much! This worked.

[FunctionDJ]

Related: No auto-complete for import: #1646

(Just linking it if someone comes across this discussion)