Importing defaults with es6 syntax doesn't work

[niba]

Syntax: import name from "module-name"; doesnt work in my project with Typescript 1.6. The imported variable is undefined.

Example:

import createLogger from "redux-logger"; //createLogger is undefined

This syntax works

import createLogger = require("redux-logger");

[ahejlsberg]

You need to write it as a namespace import (as opposed to a default import):

import * as createLogger from "redux-logger";

[niba]

Thanks @ahejlsberg , I understand that the defaults syntax works in my TS internal files but it doesn't work when I want import something from node_modules (external modules)?

I have one more problem. When I do like you said
import * as createLogger from "redux-logger";
indeed in runtime createLogger keeps a createLogger() function but it is impossible to use it in my code because Typescript compiler doesn't allow me to do it.
For example:
`
import * as createLogger from "redux-logger";

...

applyMiddleware(createLogger()),`

this gives me an error error TS2349: Cannot invoke an expression whose type lacks a call signature.

What I'm doing wrong?

[ahejlsberg]

Oh, I see. Then you need to either do this:

import * as reduxLogger from "redux-logger";

applyMiddleware(reduxLogger.createLogger());

Or this:

import { createLogger } from "redux-logger";

applyMiddleware(createLogger());

I suspect the latter one is what you're looking for.

[niba]

@ahejlsberg In both cases I have undefined in my runtime. The only import which works is

const createLogger = require("redux-logger")

but with this syntax I don't have typescript support.

Redux-Logger library exports only one default function which is createLogger.

Update 1:

This one started working when I removed word "default" from function in my module definition

import createLogger = require("redux-logger");

[ahejlsberg]

Are you using the SystemJS module loader? This looks like it might be the same problem as #5285 which has to do with SystemJS's "auto-magic" promotion of the default export.

[niba]

@ahejlsberg I'm using commonjs module loader. I compared my compiled code with babel code and here are two versions:

Typescript:

var redux_logger_1 = __webpack_require__(678);

var test = redux_logger_1.default;

Babel:

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var _reduxLogger = require("redux-logger");

var _reduxLogger2 = _interopRequireDefault(_reduxLogger);

and in the runtime redux_logger_1 is a function and redux_logger_1.default is undefined. Babel code works because the condition inside function is true so it returns obj

---

To sum up what I've said earlier:
My goal is to import a node_module which exports one default function. In pure es6 javascript I would do that with import module from "module". In typescript I tried to do it in the same way with the same syntax but my module variable was undefined during runtime. What is more weird for me this syntax was working when I was trying to link one .ts file to another .ts file.

I discovered that Babel compiles default export to another syntax that Typescript and Typescript can't handle babel output. For example I have the following code:
export default function defaultFunction() {}
In babel it will be

exports.__esModule = true;
exports['default'] = defaultFunction;
module.exports = exports['default'];

In typescript

Object.defineProperty(exports, "__esModule", { value: true });
exports.default = defaultFunction

As I said the first output is incompatible with Typescript. The imports that don't work:
import defaultFunction from "module" - defaultFunction is undefined
import { defaultFunction } from "module" - It doesn't compile if the function is declared as default in definitions
import * as defaultFunction from "module" - calling defaultFunction() causes compiler error error TS2349: Cannot invoke an expression whose type lacks a call signature.
import defaultFunction = require("module"); - calling defaultFunction() causes compiler error error TS2349: Cannot invoke an expression whose type lacks a call signature.
const defaultFunction = require("module"); - works without typescript support but you can add casting to get some intellisense

With the second output I can just do import defaultFunction from "module"

[ahejlsberg]

Ok, I think I see what is going on.

It appears the "redux-logger" module was transpiled with Babel. When Babel transpiles a module whose only export is an export default it injects a module.exports = exports["default"]; into the generated code, causing the exported object to become the function itself (instead of a module object that has the function as the default property). When paired with the _interopRequireDefault magic that Babel generates for imports the net effect is that a fake module object with a default property is created and the function can now be accessed as _reduxLogger2.default.

TypeScript doesn't do any of this magic (see here for more details). In order for TypeScript to consume the module you need to change the redux-logger.d.ts declaration file to actually reflect what is going on:

/// <reference path="../redux/redux.d.ts" />

declare module 'redux-logger' {

  function createLogger(options?: createLogger.ReduxLoggerOptions): Redux.Middleware;

  namespace createLogger {
    interface ReduxLoggerOptions {
      actionTransformer?: (action: any) => any;
      collapsed?: boolean;
      duration?: boolean;
      level?: string;
      logger?: any;
      predicate?: (getState: Function, action: any) => boolean;
      timestamp?: boolean;
      transformer?: (state:any) => any;
    }
  }

  export = createLogger;
}

Once you do that you should be able to import the module with a namespace import:

import * as createLogger from "redux-logger";

or with the equivalent:

import createLogger = require("redux-logger");

[niba]

@ahejlsberg Thanks!! Works perfectly!

[ahejlsberg]

@niba Good to hear.

BTW, it appears that Babel is killing off the export default magic in their next release (babel/babel#2212). Once they do, and once redux-logger is re-transpiled, the redux-logger.d.ts declaration file on Definitely Typed will actually be correct. So, instead of using the modified declaration file you could fix redux-logger yourself by deleting the last line in node_modules/redux-logger/lib/index.js that reads

module.exports = exports["default"];

and continue to use the declaration file you already have. In that case your import should be:

import createLogger from "redux-logger";

[niba]

@ahejlsberg Good to know that. Thank you for the information!