Webpack Fix Default Import Plugin

1.0.3 verified Sat Apr 25 auth: no javascript

Webpack plugin that hooks into require() to polyfill module.exports.default for non-ES6 modules, enabling default imports (e.g., import React from 'react') when using TypeScript compiled to ES5. Current version 1.0.3 (last release), stable with no recent updates. Differentiators: avoids the need for a two-pass TypeScript→ES6→Babel pipeline, preserving source maps and reducing build time. Compatible with CommonJS output from TypeScript. Lightweight and specific to webpack + TypeScript workflows.

Common errors

error Module not found: Error: Can't resolve 'webpack-fix-default-import-plugin' ↓

cause Plugin not installed or referenced correctly in webpack config.

fix

Run: npm install --save-dev webpack-fix-default-import-plugin and require it using correct path.

error TypeError: FixDefaultImportPlugin is not a constructor ↓

cause Importing the plugin incorrectly (e.g., using ES import syntax on a CommonJS module).

fix

Use: const FixDefaultImportPlugin = require('webpack-fix-default-import-plugin');

error Default import still not working after adding plugin ↓

cause TypeScript configuration missing allowSyntheticDefaultImports or not compiling to CommonJS.

fix

Set "allowSyntheticDefaultImports": true and "module": "commonjs" in tsconfig.json.

Warnings

gotcha The plugin only works when TypeScript targets ES5 with CommonJS module output. It does not support ES modules or other targets. ↓

fix Ensure tsconfig.json has: "target": "es5", "module": "commonjs", "allowSyntheticDefaultImports": true.

gotcha The plugin does not handle all edge cases (e.g., modules that intentionally have no default export). It may incorrectly assign a value to module.exports.default. ↓

fix Test modules individually; consider using allowSyntheticDefaultImports and esModuleInterop in TypeScript instead.

deprecated TypeScript 2.7+ includes esModuleInterop which solves this issue natively; consider upgrading instead of using this plugin. ↓

fix Set "esModuleInterop": true in tsconfig.json and remove this plugin.

gotcha Plugin version 1.0.3 fixes compatibility with axios v2; older versions may break with axios imports. ↓

fix Upgrade to >=1.0.3.

Install

npm install webpack-fix-default-import-plugin

yarn add webpack-fix-default-import-plugin

pnpm add webpack-fix-default-import-plugin

Imports

FixDefaultImportPlugin

wrong

import FixDefaultImportPlugin from 'webpack-fix-default-import-plugin';

correct

const FixDefaultImportPlugin = require('webpack-fix-default-import-plugin');

Package is CommonJS-only; ES import will break. Use require() in webpack config.

FixDefaultImportPlugin
wrong
```
plugins: [FixDefaultImportPlugin]
```
correct
```
plugins: [new FixDefaultImportPlugin()]
```
Must instantiate with new. Common mistake: passing the class directly.
FixDefaultImportPlugin
wrong
```
new FixDefaultImportPlugin({})
```
correct
```
new FixDefaultImportPlugin()
```
Constructor takes no arguments. Options object not supported.

Quickstart

Basic webpack configuration to enable default imports from CommonJS modules using TypeScript compiled to ES5.

// webpack.config.js
var FixDefaultImportPlugin = require('webpack-fix-default-import-plugin');

module.exports = {
  entry: './src/index.ts',
  output: { filename: 'bundle.js' },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  plugins: [
    new FixDefaultImportPlugin()
  ]
};