webpack-fix-default-import-plugin

Webpack plugin to fix default import for non ES6 modules

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
webpack-fix-default-import-plugin
901.0.37 years ago8 years agoMinified + gzip package size for webpack-fix-default-import-plugin in KB

Readme

Webpack Fix Default Import Plugin #

Why? ##

With Babel transpiler you could write:
import React from 'react';
import ReactDOM from 'react-dom';

In this case Babel will be able to resolve module.exports.default as modules.exports if module.exports.default is not defined.
It doesn't work with TypeScript compiler which targets ES5, so we have to use:
import * as React from 'react';
import * as ReactDOM from 'react-dom';

One well know workaround for this issue is to use TWO transpilers, typescript first targeted to ES6 and Babel second targeted to ES5. Extra transpilation takes more time and break source maps.
The other solution is to hook into webpack's require() implementation and polyfill module.exports.default if it is blank and module is not ES6 module.
This plugin hooks into require() and try to polyfill module.exports.default.

Installation ##

npm install --save-dev webpack-fix-default-import-plugin

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

module.exports = {
  ...
  plugins: [
    ...
    new FixDefaultImportPlugin()
  ],
};

tsconfig.json example:
{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": true,
    "noEmitHelpers": true,
    "allowSyntheticDefaultImports": true,   // required
    "module": "commonjs",                   // required
    "target": "es5",                        // required
    "jsx": "react"
  },
  "exclude": [
    "node_modules",
    "typings/globals"
  ]
}

tslint.json example:
{
  ...
  "rules": {
    ...
    "no-unused-variable": [true, {"ignore-pattern": "^(React|ReactDOM)$"}],
    "import-name": false,
    "no-default-export": false
  }
}