{"id":20622,"library":"ts-import-plugin","title":"ts-import-plugin","description":"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.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/Brooooooklyn/ts-import-plugin","tags":["javascript","antd","TypeScript","plugin","typescript"],"install":[{"cmd":"npm install ts-import-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add ts-import-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add ts-import-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: requires TypeScript >= 4.8 from v3.0.0","package":"typescript","optional":false}],"imports":[{"note":"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')`.","wrong":"import tsImportPluginFactory from 'ts-import-plugin'","symbol":"tsImportPluginFactory (default)","correct":"const tsImportPluginFactory = require('ts-import-plugin')"},{"note":"Default export name is createTransformer for ESM; using named import {} will fail. This is the pattern for rollup and some ESM setups.","wrong":"import { createTransformer } from 'ts-import-plugin'","symbol":"createTransformer","correct":"import createTransformer from 'ts-import-plugin'"},{"note":"TypeScript type export for the options object. Only available in TypeScript projects; not exported at runtime.","wrong":null,"symbol":"PluginOptions","correct":"import type { PluginOptions } from 'ts-import-plugin'"}],"quickstart":{"code":"// webpack.config.js\nconst tsImportPluginFactory = require('ts-import-plugin');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        use: {\n          loader: 'ts-loader',\n          options: {\n            transpileOnly: true,\n            getCustomTransformers: () => ({\n              before: [\n                tsImportPluginFactory({\n                  libraryName: 'antd',\n                  libraryDirectory: 'es',\n                  style: true,\n                }),\n              ],\n            }),\n            compilerOptions: {\n              module: 'es2015',\n            },\n          },\n        },\n        exclude: /node_modules/,\n      },\n    ],\n  },\n};","lang":"javascript","description":"Configures ts-loader with ts-import-plugin to transform antd imports to modular ones, enabling tree shaking."},"warnings":[{"fix":"Upgrade TypeScript to 4.8+ or use ts-import-plugin v2.x for TS < 4.8","message":"TypeScript version must be >= 4.8 for ts-import-plugin v3.0.0","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Upgrade TypeScript to 4.2+ or use v1.x for TS < 4.2","message":"TypeScript version must be >= 4.2 for ts-import-plugin v2.0.0","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Use named imports (e.g., `import { map } from 'lodash'`) to trigger the transform","message":"Plugin does not work with `import * as _ from 'lodash'` or `import _ from 'lodash'` (default imports)","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure both tsconfig and webpack loader config have the module set to ES2015/ESNext","message":"Must set `module: 'ESNext'` in tsconfig.json and `compilerOptions.module: 'es2015'` in webpack config for proper output","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Change `import * as X from 'lib'` to `import { X } from 'lib'`.","cause":"The plugin only transforms named imports (e.g., import { Foo } from 'bar'), not namespace imports.","error":"Error: Plugin 'ts-import-plugin' cannot be used with 'import * as' or 'default import'"},{"fix":"Upgrade TypeScript to >= 4.8 or downgrade ts-import-plugin to v2.x.","cause":"Using ts-import-plugin v3.0.0 with TypeScript < 4.8 (missing context.factory API).","error":"TypeError: Cannot read properties of undefined (reading 'factory')"},{"fix":"Set `libraryDirectory` to 'es' (or correct path) and ensure style path exists. Use `style: true` for default CSS or provide a custom resolver.","cause":"Style option enabled but style path resolver cannot locate the styles (e.g., libraryDirectory mismatch).","error":"Module not found: Error: Can't resolve 'antd/es/button/style'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}