ts-import-plugin

3.0.0 verified Sat Apr 25 auth: no javascript

Modular import plugin for TypeScript, converting named imports like `import { Alert, Card } from 'antd'` into separate per-module imports and optional style imports. Version 3.0.0 requires TypeScript >= 4.8 and drops support for older versions. The plugin is commonly used with antd, antd-mobile, and other large libraries to enable tree shaking and reduce bundle size. It works with ts-loader, awesome-typescript-loader, rollup-plugin-typescript2, and @rollup/plugin-typescript. Key differentiator: operates at the TypeScript compiler level via custom transformers, unlike babel-plugin-import which requires Babel.

Common errors

error Error: Plugin 'ts-import-plugin' cannot be used with 'import * as' or 'default import' ↓

cause The plugin only transforms named imports (e.g., import { Foo } from 'bar'), not namespace imports.

fix

Change import * as X from 'lib' to import { X } from 'lib'.

error TypeError: Cannot read properties of undefined (reading 'factory') ↓

cause Using ts-import-plugin v3.0.0 with TypeScript < 4.8 (missing context.factory API).

fix

Upgrade TypeScript to >= 4.8 or downgrade ts-import-plugin to v2.x.

error Module not found: Error: Can't resolve 'antd/es/button/style' ↓

cause Style option enabled but style path resolver cannot locate the styles (e.g., libraryDirectory mismatch).

fix

Set libraryDirectory to 'es' (or correct path) and ensure style path exists. Use style: true for default CSS or provide a custom resolver.

Warnings

breaking TypeScript version must be >= 4.8 for ts-import-plugin v3.0.0 ↓

fix Upgrade TypeScript to 4.8+ or use ts-import-plugin v2.x for TS < 4.8

breaking TypeScript version must be >= 4.2 for ts-import-plugin v2.0.0 ↓

fix Upgrade TypeScript to 4.2+ or use v1.x for TS < 4.2

gotcha Plugin does not work with `import * as _ from 'lodash'` or `import _ from 'lodash'` (default imports) ↓

fix Use named imports (e.g., `import { map } from 'lodash'`) to trigger the transform

gotcha Must set `module: 'ESNext'` in tsconfig.json and `compilerOptions.module: 'es2015'` in webpack config for proper output ↓

fix Ensure both tsconfig and webpack loader config have the module set to ES2015/ESNext

Install

npm install ts-import-plugin

yarn add ts-import-plugin

pnpm add ts-import-plugin

Imports

tsImportPluginFactory (default)
wrong
```
import tsImportPluginFactory from 'ts-import-plugin'
```
correct
```
const tsImportPluginFactory = require('ts-import-plugin')
```
CommonJS default export via require. ESM named export createTransformer is available for rollup usage. In TypeScript, you may need to use `import tsImportPluginFactory = require('ts-import-plugin')`.
createTransformer
wrong
```
import { createTransformer } from 'ts-import-plugin'
```
correct
```
import createTransformer from 'ts-import-plugin'
```
Default export name is createTransformer for ESM; using named import {} will fail. This is the pattern for rollup and some ESM setups.
PluginOptions
```
import type { PluginOptions } from 'ts-import-plugin'
```
TypeScript type export for the options object. Only available in TypeScript projects; not exported at runtime.

Quickstart

Configures ts-loader with ts-import-plugin to transform antd imports to modular ones, enabling tree shaking.

// webpack.config.js
const tsImportPluginFactory = require('ts-import-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'ts-loader',
          options: {
            transpileOnly: true,
            getCustomTransformers: () => ({
              before: [
                tsImportPluginFactory({
                  libraryName: 'antd',
                  libraryDirectory: 'es',
                  style: true,
                }),
              ],
            }),
            compilerOptions: {
              module: 'es2015',
            },
          },
        },
        exclude: /node_modules/,
      },
    ],
  },
};