Skip to content

Typescript doesnt allow creating module definitions for certain types of ES6 imports #6656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
pdeva opened this issue Jan 27, 2016 · 5 comments
Labels
By Design Deprecated - use "Working as Intended" or "Design Limitation" instead

Comments

@pdeva
Copy link

pdeva commented Jan 27, 2016

There is a library I use, 'react-bootstrap-switch', that needs to be imported the following way in TypeScript:

import * as Switch from 'react-bootstrap-switch';

render () {
 return <Switch/>
}

It seems currently TypeScript doesnt allow creating a module definition for a library that exports like this.

If I do this:

declare module 'react-bootstrap-switch'
{
    import React = require("react");
    class Switch extends React.Component<{onColor?:string},{} >
    {}

    export  = Switch;
}

It results in this error:

error TS2497: Module ''react-bootstrap-switch'' resolves to a non-module entity and cannot be imported using this construct.
@RyanCavanaugh RyanCavanaugh added the Bug A bug in TypeScript label Jan 27, 2016
@RyanCavanaugh
Copy link
Member

As a workaround, you can add a line:

declare module 'react-bootstrap-switch'
{
    import React = require("react");
    class Switch extends React.Component<{onColor?:string},{}> {

    }
    module Switch { } // <----

    export = Switch;
}

@blakeembrey
Copy link
Contributor

@pdeva Just a question, but why must you import that way? If's it's using export = it implies a non-ES6 export (E.g. CommonJS and using module.exports =) and can be imported using import Switch = require('react-bootstrap-switch').

@pdeva
Copy link
Author

pdeva commented Jan 27, 2016

we want to have 100% ES6 code.

@Arnavion
Copy link
Contributor

ES6 modules cannot represent a CJS module that assigns to module.exports. import * as Switch is not required to give you what react-bootstrap-switch assigns to its module.exports; it could instead give you an arbitrary object that has the same properties as whatever was assigned to its module.exports. In particular, if it assigned a function to module.exports (which sounds like the case here since it's a JSX component), you wouldn't necessarily get a function out.

So basically you're writing ES6 code that isn't valid ES6 - it only works when transpiled to ES5 because the ES5 transpilation of import * as Switch is var Switch = require()

If you do still want to write it as an ES6 import, then it would be import Switch from 'react-bootstrap-switch'; with a loader that exposes CJS module.exports as a default ES6 export like SystemJS.

@billti billti added By Design Deprecated - use "Working as Intended" or "Design Limitation" instead and removed Bug A bug in TypeScript labels Feb 23, 2016
@billti
Copy link
Member

billti commented Feb 23, 2016

I think @Arnavion has addressed this pretty clearly (thanks!). Closing as by design.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
By Design Deprecated - use "Working as Intended" or "Design Limitation" instead
Projects
None yet
Development

No branches or pull requests

5 participants