Webpack Fix Default Import Plugin
Why?
With Babel transpiler you could write:
;;
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:
;;
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 = ; moduleexports = ... plugins: ... ;
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