{"id":12178,"library":"ts-loader","title":"ts-loader: TypeScript loader for webpack","description":"ts-loader is a webpack loader designed to compile TypeScript code into JavaScript within the webpack build pipeline. It leverages the official TypeScript compiler (`tsc`) to perform compilation, supporting full type checking and the generation of declaration files (`.d.ts`). The current stable version is 9.5.7, with frequent patch and minor releases to maintain compatibility with new TypeScript and webpack versions. Unlike `@babel/preset-typescript` with `babel-loader`, `ts-loader` performs comprehensive type checking, which can be computationally intensive for large projects. To mitigate this, it is commonly used in conjunction with `fork-ts-checker-webpack-plugin`, allowing type checking to run in a separate process for faster incremental builds while `ts-loader` handles transpilation.","status":"active","version":"9.5.7","language":"javascript","source_language":"en","source_url":"https://github.com/TypeStrong/ts-loader","tags":["javascript","ts-loader","typescript-loader","webpack","loader","typescript","ts"],"install":[{"cmd":"npm install ts-loader","lang":"bash","label":"npm"},{"cmd":"yarn add ts-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add ts-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as the bundler that consumes the loader. Supports webpack 5.x+.","package":"webpack","optional":false},{"reason":"Required as a peer dependency for compilation and type checking. Supports TypeScript 3.6.3+.","package":"typescript","optional":false}],"imports":[{"note":"ts-loader is configured within your webpack.config.js as a rule, identified by its string name. It is not imported directly into application code.","wrong":"import tsLoader from 'ts-loader'; // ts-loader is a webpack loader, not a direct JS module export for runtime use.","symbol":"'ts-loader'","correct":"module.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        loader: 'ts-loader',\n        options: {\n          // loader options\n        }\n      }\n    ]\n  }\n};"},{"note":"Setting `transpileOnly: true` disables type checking during compilation, significantly speeding up build times. Type checking can then be offloaded to `fork-ts-checker-webpack-plugin` for parallel execution.","symbol":"transpileOnly","correct":"{\n  loader: 'ts-loader',\n  options: {\n    transpileOnly: true,\n  }\n}"},{"note":"Allows specifying a custom path to a `tsconfig.json` file, overriding the default behavior of searching in the project root or entry point's directory.","symbol":"configFile","correct":"{\n  loader: 'ts-loader',\n  options: {\n    configFile: 'path/to/your/tsconfig.build.json',\n  }\n}"}],"quickstart":{"code":"const path = require('path');\nconst ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\n\nmodule.exports = {\n  mode: 'development',\n  entry: './src/index.ts',\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  resolve: {\n    extensions: ['.ts', '.tsx', '.js'],\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        use: {\n          loader: 'ts-loader',\n          options: {\n            // Enable faster transpilation by skipping type checking, often paired with ForkTsCheckerWebpackPlugin\n            transpileOnly: true,\n          },\n        },\n        exclude: /node_modules/,\n      },\n    ],\n  },\n  plugins: [\n    // Run type checking in a separate process for performance\n    new ForkTsCheckerWebpackPlugin(),\n  ],\n  devtool: 'inline-source-map',\n  // Example tsconfig.json (tsconfig.json in project root):\n  // {\n  //   \"compilerOptions\": {\n  //     \"outDir\": \"./dist/\",\n  //     \"sourceMap\": true,\n  //     \"noImplicitAny\": true,\n  //     \"module\": \"esnext\",\n  //     \"target\": \"es2017\",\n  //     \"jsx\": \"react\",\n  //     \"lib\": [\"dom\", \"esnext\"]\n  //   },\n  //   \"include\": [\"src\"]\n  // }\n};","lang":"typescript","description":"This quickstart configures webpack to use `ts-loader` for transpiling TypeScript files, including source map generation and integrating `fork-ts-checker-webpack-plugin` for optimized type checking during development."},"warnings":[{"fix":"Upgrade webpack to v5+ and Node.js to v12+ if upgrading to ts-loader v9+. Otherwise, stick to ts-loader v8.x for webpack 4 compatibility.","message":"ts-loader v9.0.0 introduced breaking changes, requiring webpack 5+ and Node.js 12+. Projects using older webpack or Node.js versions must use ts-loader v8.x or migrate their environment.","severity":"breaking","affected_versions":"<9.0.0"},{"fix":"Ensure `typescript` is installed in your project's dev dependencies: `npm install typescript --save-dev` or `yarn add typescript --dev`.","message":"`ts-loader` is a webpack loader and requires `typescript` as a peer dependency. Failing to install `typescript` separately will result in build errors indicating that the TypeScript compiler cannot be found or initialized.","severity":"gotcha","affected_versions":"*"},{"fix":"Set `transpileOnly: true` in your `ts-loader` options and add `new ForkTsCheckerWebpackPlugin()` to your webpack `plugins` array.","message":"For larger projects, `ts-loader` can cause slow build times due to performing type checking synchronously. It's highly recommended to use the `transpileOnly: true` option in conjunction with `fork-ts-checker-webpack-plugin` to run type checking in a separate process.","severity":"gotcha","affected_versions":"*"},{"fix":"Upgrade `ts-loader` to version `9.5.7` or newer when using TypeScript 6.0+. Ensure `rootDir` is explicitly defined in your `tsconfig.json` for robustness.","message":"ts-loader versions prior to 9.5.7 experienced `TS5011` errors with TypeScript 6.0 due to `transpileModule` being called with `rootDir: undefined`. This can lead to compilation failures when using newer TypeScript versions.","severity":"breaking","affected_versions":"<9.5.7"},{"fix":"Upgrade to `ts-loader@9.5.7` or the latest stable version.","message":"Versions 9.5.5 and 9.5.6 of `ts-loader` were skipped due to publishing issues. Users should ensure they are on `9.5.7` or a newer version to receive all latest fixes and features.","severity":"gotcha","affected_versions":"9.5.5, 9.5.6"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add a rule to `module.rules` in your `webpack.config.js` to process TypeScript files with `ts-loader`: `{ test: /\\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }`. Also ensure `.ts` and `.tsx` are included in `resolve.extensions`.","cause":"Webpack encountered a TypeScript file (e.g., `.ts`, `.tsx`) but `ts-loader` was not configured or applied to handle it in `webpack.config.js`.","error":"Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders"},{"fix":"Install TypeScript as a development dependency: `npm install typescript --save-dev` or `yarn add typescript --dev`.","cause":"The `typescript` package, a required peer dependency for `ts-loader`, is not installed in the project.","error":"Error: Cannot find module 'typescript' from '...' (ts-loader)"},{"fix":"Verify your `tsconfig.json` is correctly configured for module resolution, including `baseUrl` and `paths` if needed. Ensure all necessary `@types/*` packages are installed. If using a custom `tsconfig.json` path, check the `options.configFile` in `webpack.config.js`.","cause":"TypeScript's module resolution failed, often due to an incorrect `tsconfig.json` configuration (e.g., `baseUrl`, `paths`), missing type declarations, or an incorrectly specified `configFile` option in `ts-loader`.","error":"ERROR in ts-loader\\index.js!./src/index.ts\nTS2307: Cannot find module '...' or its corresponding type declarations."},{"fix":"Review the indicated TypeScript file and line number for syntax errors. Ensure your TypeScript version is compatible with your project's code and installed `@types` packages, upgrading TypeScript if necessary.","cause":"A general TypeScript compilation error within `ts-loader`, indicating an issue with the TypeScript code itself or a compatibility problem between the installed TypeScript version and the code/types being processed.","error":"ERROR in ts-loader\\index.js!./src/app.ts\n(5,3): error TS1005: ',' expected."}],"ecosystem":"npm"}