How to fix ESM syntax requires file extension, got import "module" in React

Review your import statements and add the appropriate file extension to each local module import.

Before:

import MyComponent from './MyComponent'
import { helper } from '../utils/helpers'
import './styles.css'

After:

import MyComponent from './MyComponent.jsx'
import { helper } from '../utils/helpers.js'
import './styles.css'  // CSS imports already include extension

Note: Package imports (from node_modules) do not require extensions, only relative/absolute file paths do.

When importing TypeScript files in a Vite project, you have two options:

Option 1: Use .ts/.tsx extensions (recommended for Vite):

import { MyType } from './types.ts'
import MyComponent from './MyComponent.tsx'

Option 2: Use .js/.jsx extensions (Node.js ESM standard):

// Import with .js even though source file is .ts
import { MyType } from './types.js'
import MyComponent from './MyComponent.jsx'

While Node.js ESM technically expects .js extensions (since TypeScript compiles to JavaScript), Vite's dev server handles .ts/.tsx extensions natively, so using the actual source file extension is more straightforward.

Barrel files (index.ts/index.js) that re-export multiple modules are common sources of this error.

Before:

// src/components/index.js
export { default as Button } from './Button'
export { default as Input } from './Input'

After:

// src/components/index.js
export { default as Button } from './Button.jsx'
export { default as Input } from './Input.jsx'

Search your codebase for these patterns:

grep -r "from '\./" src/
grep -r 'from "\../' src/

Update your tsconfig.json to work with ESM module resolution:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler",  // Vite-compatible resolution
    "allowImportingTsExtensions": true,
    "noEmit": true  // Vite handles compilation
  }
}

For Node.js 16+ compatibility in SSR scenarios:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "node16"  // or "nodenext"
  }
}

With node16 or nodenext, TypeScript will require .js extensions even for .ts source files.

If a third-party library in node_modules has extensionless imports in its ESM build, you have limited options:

Option 1: Use a CommonJS version (if available):
Check the library's package.json for a CommonJS export and configure Vite to use it:

// vite.config.js
export default {
  resolve: {
    alias: {
      'problematic-lib': 'problematic-lib/dist/cjs/index.js'
    }
  }
}

Option 2: Report the issue to the library maintainers - ESM builds should include file extensions per Node.js spec.

Option 3: Use optimizeDeps to pre-bundle the dependency:

// vite.config.js
export default {
  optimizeDeps: {
    include: ['problematic-lib']
  }
}

If you're using Vite for SSR (server-side rendering), ensure your package.json correctly declares the module type:

{
  "type": "module"
}

This tells Node.js to treat .js files as ESM. Without this field, Node.js defaults to CommonJS and will reject ESM syntax entirely.

If you need to mix CommonJS and ESM, use explicit file extensions:
- .mjs for ES modules
- .cjs for CommonJS modules
- .js behavior determined by package.json "type" field