Webpack TypeScript Resolution Plugin

2.0.1 · deprecated · verified Sun Apr 19

resolve-typescript-plugin is a webpack plugin designed to bridge the gap between TypeScript's ES Module output expectations and webpack's module resolution for ES Modules. It allows developers to import TypeScript files using a `.js` extension (e.g., `import { foo } from './bar.js'`) which aligns with native ES Module resolution behavior in Node.js and browsers, rather than webpack's default of requiring `.ts` or no extension. The current stable version is 2.0.1. Its release cadence has been infrequent since the introduction of an equivalent built-in feature in webpack. A key differentiator was solving the specific import extension problem for ESM TypeScript projects before webpack v5.74.0; now, its primary use case is for projects still on older webpack versions that require this specific resolution behavior. It is effectively in maintenance mode for older webpack versions, as webpack itself now offers `resolve.extensionAlias` for this functionality, making the plugin largely obsolete for modern webpack setups.

Common errors

```
Module not found: Error: Can't resolve './some-module.js' in '...' (webpack)
```
cause Attempting to import a TypeScript file using a `.js` extension without the plugin or `extensionAlias` configured correctly, or `resolve.extensions` still contains `.ts`/`.tsx`.

fix Ensure `new ResolveTypeScriptPlugin()` is correctly added to `resolve.plugins` in your webpack config. Also, remove `.ts` and `.tsx` from your `resolve.extensions` array to avoid conflicts. For webpack >= 5.74.0, use `resolve.extensionAlias` instead of the plugin.
```
ERROR in   Error: webpack.WebpackError: TypeError: The 'this' context cannot be converted to an object. (webpack)
```
cause This error can occur in older versions of the plugin or webpack if the `webpack.config.js` is set to CommonJS and the plugin is imported incorrectly, or there's a misconfiguration of webpack's ESM handling.

fix Ensure your webpack config aligns with the project's module type. If `"type": "module"` is in `package.json`, use `import` for the plugin and ensure the webpack config itself is an ESM module (e.g., `export default { ... }`). For CommonJS configs, use `const ResolveTypeScriptPlugin = require('resolve-typescript-plugin');`.

Warnings

deprecated This plugin is largely obsolete for webpack v5.74.0 and newer. Webpack now provides equivalent functionality via `resolve.extensionAlias`.
Fix: Migrate your webpack configuration to use `resolve.extensionAlias`: `{ '.js': ['.ts', '.js'], '.mjs': ['.mts', '.mjs'] }` and remove `new ResolveTypeScriptPlugin()` from `resolve.plugins`.
breaking Node.js versions 12 and 17 are no longer supported since v2.0.0.
Fix: Upgrade your Node.js environment to version 14, 16, or 18+ to use versions 2.x of this plugin.
gotcha Previous versions of the README recommended setting `resolve.fullySpecified` to `true`. This is no longer recommended as it can break compatibility with `webpack-dev-server` and other tooling.
Fix: Ensure `resolve.fullySpecified` is not explicitly set to `true` in your webpack configuration when using this plugin, or remove it if present.
gotcha When using webpack 4.x with ES modules, your `webpack.config.js` file cannot be in ES module format if `"type": "module"` is set in `package.json`.
Fix: For webpack 4.x, name your configuration file `webpack.config.cjs` and use CommonJS `require()` syntax for imports/exports.
gotcha The plugin by default does not resolve TypeScript files within `node_modules`. This can be unexpected if you have TS-only dependencies that require this resolution behavior.
Fix: If needed, enable resolution within `node_modules` by configuring the plugin with `new ResolveTypeScriptPlugin({ includeNodeModules: true })`.

Install

npm install resolve-typescript-plugin npm
yarn add resolve-typescript-plugin yarn
pnpm add resolve-typescript-plugin pnpm

Imports

ResolveTypeScriptPlugin
wrong:
```
const ResolveTypeScriptPlugin = require('resolve-typescript-plugin');
```
correct:
```
import ResolveTypeScriptPlugin from 'resolve-typescript-plugin';
```
For webpack.config.js files set to 'type': 'module' in package.json. If using CommonJS for webpack.config.js (e.g., webpack.config.cjs or older webpack 4 setups), use `require`.
ResolveTypeScriptPlugin Options
```
new ResolveTypeScriptPlugin({ includeNodeModules: true });
```
Options are passed to the constructor. The `includeNodeModules` option is notable for controlling resolution within `node_modules`.

Quickstart

Illustrates how to integrate the plugin into a webpack configuration for an ES Module TypeScript project, enabling `.js` extension imports for `.ts` files.

import ResolveTypeScriptPlugin from 'resolve-typescript-plugin';

/** @type {import('webpack').Configuration} */
export default {
    mode: 'development',
    entry: './src/index.ts',
    output: {
        filename: 'bundle.js',
        path: new URL('./dist', import.meta.url).pathname
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        // It's recommended to remove .ts and .tsx from resolve.extensions when using this plugin
        extensions: ['.js', '.json'],
        plugins: [new ResolveTypeScriptPlugin()]
    },
    // Recommended for ES Module projects
    experiments: {
        outputModule: true
    }
};

view raw JSON →