Definitelytyped: @types/react-loadable: Export should not be 'default'

[crohlfs]

• [x] I tried using the @types/xxxx package and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @Kovensky @odensc
  
  

Based on node -p "require('react-loadable')", it looks like this module does not have a default export. The typings have a default export causing errors when I try to use it this way.

[odensc]

Hi @crohlfs,

Putting "allowSyntheticDefaultImports": true in your tsconfig should fix this.

[reintjanhoiting]

Hi @odensc,

I ran in the same issue as @crohlfs described. i do have "allowSyntheticDefaultImports": true enabled.

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "lib": ["es2015", "es6", "dom"],
        "allowSyntheticDefaultImports": true,
        "jsx": "react"
    },
    "exclude": [
        "node_modules"
    ],
    "include": [
        "src/**/*"
    ]
}

login.async.component.tsx (copy past from the test)

import * as React from 'react';

import Loadable, { LoadingComponentProps } from "react-loadable";

class LoadingComponent extends React.Component<LoadingComponentProps> {
  render() {
    return (
      <div>
        {this.props.error}
        {this.props.isLoading}
        {this.props.pastDelay}
        {this.props.timedOut}
      </div>
    );
  }
}

const Loadable100 = Loadable({
  loader: () => import("./login.component"),
  loading: LoadingComponent,
  delay: 100,
  timeout: 10000
});

export default class LoginAsyncComponent extends React.Component {
  render() {
    return <Loadable100 />;
  }
}

running: "typescript": "2.5.2",

Everything compiles like a king 👍 , but at run time it ain't working 👎

Uncaught TypeError: react_loadable_1.default is not a function

any clue what im missing here ?

[odensc]

Hmm - can't reproduce. Could you upload a minimal repro to github?

[reintjanhoiting]

@odensc
sorry for the delayed answer wasn't at home for a few days.

here is a minimal repro:
https://github.com/reintjanhoiting/react-loadable-allow-synthetic

Thanks for the help!

[odensc]

Sorry for the delay @reintjanhoiting. Please try setting "module" to "esnext" in your tsconfig.json.

[EYHN]

same issue.

[stevenmusumeche]

same issue here

[stevenmusumeche]

This is how I am importing it so that it works at runtime

import { default as Loadable } from 'react-loadable';

[rhyek]

import { default as Loadable } from 'react-loadable';

This doesn't work either. AFAIK that's the same as import Loadable from 'react-loadable'.

react-loadable does not have a default export and therefore the type definitions should not either.

[mvestergaard]

I have the same issue. The problem stems from react-loadable not exposing a default export. It uses module.exports = Loadable;.

The correct way to import this via typescript would be import * as Loadable from 'react-loadable'; but that conflicts with the typings.

[nilobarp]

For me it only works if do import * as Loadable from 'react-loadable'

[AlexFrazer]

Same problem here. Tried the allowSyntheticDefaultImports as well to no avail

[yss14]

Someone got a working version with typescript and react-loadable?

In my case

//App.tsx
import * as Loadable from 'react-loadable';

const AsyncLoadable = Loadable({
    loader: () => import('./Async')
});

//Async.tsx
import * as React from 'react';

export default class Async extends React.Component<undefined, undefined> {
    render() {
        return <h1>Hello Async</h1>;
    }
}

this does not compile.

Argument of type '{ loader: () => Promise<typeof "<path>/code-splitting/src/Async">; }' is not assignable to parameter of type 'Options<{ children?: ReactNode; }, typeof "<path>/code-splitting/src...'.
  Type '{ loader: () => Promise<typeof "<path>/code-splitting/src/Async">; }' is not assignable to type 'OptionsWithRender<{ children?: ReactNode; }, typeof "<path>/code-spl...'.
    Property 'render' is missing in type '{ loader: () => Promise<typeof "<path>/code-splitting/src/Async">; }'.

[rhyek]

Try out https://github.com/ctrlplusb/react-async-component. It includes its
own type definitions and found it worked better for me with
react-hot-loader.

On Sun, Feb 11, 2018 at 12:11 PM, yss14 [e-mail] wrote:

Someone got a working version with typescript and react-loadable?

In my case

//App.tsx
import * as Loadable from 'react-loadable';

const AsyncLoadable = Loadable({
loader: async () => import('./Async')
});

//Async.tsx
import * as React from 'react';

export default class Async extends React.Component {
render() {
return

Hello Async

;
}
}

it does not compile.

Argument of type '{ loader: () => Promise/code-splitting/src/Async">; }' is not assignable to parameter of type 'Options<{ children?: ReactNode; }, typeof "/code-splitting/src...'.
Type '{ loader: () => Promise/code-splitting/src/Async">; }' is not assignable to type 'OptionsWithRender<{ children?: ReactNode; }, typeof "/code-spl...'.
Property 'render' is missing in type '{ loader: () => Promise/code-splitting/src/Async">; }'.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/19337#issuecomment-364773274,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAq5ylY78eoU-4b3-TfI0djwPd4NoV9Jks5tTy1WgaJpZM4PCYGo
.

[mvestergaard]

@yss14

I found that I had to explicitly grab the .default from the imported module, for it to work.
I've wrapped react-loadable like this:

interface IModuleWithDefault<T> {
  default: T;
}

export function AsyncRoute<T extends React.ComponentType<any>>(
  loader: () => Promise<IModuleWithDefault<T>>,
): React.ComponentType<any> {
  return Loadable({
    loader: () => loader().then(m => m.default),
    delay: 2000,
    timeout: 30000,
    loading: () => <div>loading...</div>,
  });
}

[crohlfs]

I've been using my own type definition for the last few months: https://gist.github.com/crohlfs/f65ea6a03bcf3ca690b913458ee54631

Used like this:
import * as Loadable from "react-loadable";

[Jessidhia]

Do not use import * as Loadable. Repeat it as a mantra.

Either use import Loadable = require('react-loadable') if you're not using a bundler, or enable synthetic defaults and use import Loadable from 'react-loadable'.

[lednhatkhanh]

Any updates on this issue?

[mikemartincode]

Hey, I ran into this issue today while working on a boilerplate.

Here is a minimal repo that it works on.

I used const Loadable = require("react-loadable").

https://github.com/mikemartincode/react-webpack-typescript-starter

[lednhatkhanh]

I switched to react-async-component and it's working fine with typescript.

[Bastardly]

I made a direct import. Worked for me. :)

import * as Loadable from 'react-loadable/lib/index';

[dharmeshtailor]

This worked for me. :-)

const Loadable = require('react-loadable');

[abhinav2331]

@odensc
sorry for the delayed answer wasn't at home for a few days.

here is a minimal repro:
https://github.com/reintjanhoiting/react-loadable-allow-synthetic

Thanks for the help!

Hi I run your code but it not working.

[Jessidhia]

If you're using typescript's module transform without esModuleInterop, the only correct way to import react-loadable is import Loadable = require('react-loadable').

Otherwise, or when using a bundler, you should import it as import Loadable from 'react-loadable'.

Make sure that, if you're using a bundler, that your modules setting is either es2015 or esnext, and that both esModuleInterop and allowSyntheticDefaultImports are enabled.

[abhinav2331]

If you're using typescript's module transform without esModuleInterop, the only correct way to import react-loadable is import Loadable = require('react-loadable').

Otherwise, or when using a bundler, you should import it as import Loadable from 'react-loadable'.

Make sure that, if you're using a bundler, that your modules setting is either es2015 or esnext, and that both esModuleInterop and allowSyntheticDefaultImports are enabled.

Yes I checked my tsconfig file both are enabled.
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
I am importing Loadable as same
import Loadable = require('react-loadable')
But still loader not rendering only display loading. Please check screenshots.

http://pixeledged.com/image/code.png
http://pixeledged.com/image/loading.png

[chachaxw]

Someone got a working version with typescript and react-loadable?

In my case

//App.tsx
import * as Loadable from 'react-loadable';

const AsyncLoadable = Loadable({
  loader: () => import('./Async')
});

//Async.tsx
import * as React from 'react';

export default class Async extends React.Component<undefined, undefined> {
    render() {
        return <h1>Hello Async</h1>;
    }
}

this does not compile.

Argument of type '{ loader: () => Promise<typeof "<path>/code-splitting/src/Async">; }' is not assignable to parameter of type 'Options<{ children?: ReactNode; }, typeof "<path>/code-splitting/src...'.
  Type '{ loader: () => Promise<typeof "<path>/code-splitting/src/Async">; }' is not assignable to type 'OptionsWithRender<{ children?: ReactNode; }, typeof "<path>/code-spl...'.
    Property 'render' is missing in type '{ loader: () => Promise<typeof "<path>/code-splitting/src/Async">; }'.

I met the same problem with you, but I solved that problem

const Example = Loadable({
    loader: () => import('./components/Example') as Promise<any>,
    loading: Loading,
});

And this way can solve typescript problems.

[lixianbin1]

I met the same problem with you,I think it's useful.
const Loadable = require('react-loadable')