diff --git a/types/react-loadable/index.d.ts b/types/react-loadable/index.d.ts
index 424372a068..480ca7765f 100644
--- a/types/react-loadable/index.d.ts
+++ b/types/react-loadable/index.d.ts
@@ -2,7 +2,7 @@
 // Project: https://github.com/thejameskyle/react-loadable#readme
 // Definitions by: Diogo Franco <https://github.com/Kovensky>, Oden S. <https://github.com/odensc>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.3
+// TypeScript Version: 2.4
 
 import * as React from 'react';
 
@@ -68,6 +68,11 @@ export interface OptionsWithRender<Props, Exports extends object> extends Common
      * ```
      */
     render(loaded: Exports, props: Props): React.ReactNode;
+
+    // NOTE: render is not optional if the loader return type is not compatible with the type
+    // expected in `OptionsWithoutRender`. If you do not want to provide a render function, ensure that your
+    // function is returning a promise for a React.ComponentType or is the result of import()ing a module
+    // that has a component as its `default` export.
 }
 
 export interface OptionsWithMap<Props, Exports extends { [key: string]: any }> extends CommonOptions {
diff --git a/types/react-loadable/test/imports/no-default.tsx b/types/react-loadable/test/imports/no-default.tsx
new file mode 100644
index 0000000000..5acf63f161
--- /dev/null
+++ b/types/react-loadable/test/imports/no-default.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+interface Props {
+  text: string;
+}
+
+export const AComponent: React.SFC<Props> = ({ text }) => <span>{text}</span>;
diff --git a/types/react-loadable/test/imports/with-default.tsx b/types/react-loadable/test/imports/with-default.tsx
new file mode 100644
index 0000000000..0d800605f0
--- /dev/null
+++ b/types/react-loadable/test/imports/with-default.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+interface Props {
+  foo: boolean;
+}
+
+export default class AComponent extends React.Component<Props> {
+  render() {
+    return this.props.foo ? <div/> : null;
+  }
+}
diff --git a/types/react-loadable/react-loadable-tests.tsx b/types/react-loadable/test/index.tsx
similarity index 69%
rename from types/react-loadable/react-loadable-tests.tsx
rename to types/react-loadable/test/index.tsx
index ab73191f1d..c31c9b4d7f 100644
--- a/types/react-loadable/react-loadable-tests.tsx
+++ b/types/react-loadable/test/index.tsx
@@ -82,3 +82,28 @@ const used300 = <Loadable300 text='300' />;
 const used400 = <Loadable400 text='400' />;
 
 Loadable100.preload();
+
+// dynamic import syntax confuses tslint@5.5.0, so some disable comments were necessary.
+// all of these disables are specifically for working around this issue,
+// no rules were intended to be skipped.
+
+// tslint:disable-next-line one-variable-per-declaration
+const WithImport = Loadable({
+  loader: () => import('./imports/with-default'),
+  loading: LoadingComponent // tslint:disable-line semicolon
+  // render is optional
+}); // tslint:disable-line semicolon
+
+const usedImport = <WithImport foo={false}/>;
+
+// tslint:disable-next-line one-variable-per-declaration
+const WithImportNoDefault = Loadable({
+  loader: () => import('./imports/no-default'),
+  loading: LoadingComponent,
+  // render is mandatory
+  render(loaded, props: { text: string }) { // tslint:disable-line whitespace
+    return <loaded.AComponent {...props}/>;
+  } // tslint:disable-line semicolon
+}); // tslint:disable-line semicolon
+
+const usedImportNodefault = <WithImportNoDefault text='import'/>;
diff --git a/types/react-loadable/tsconfig.json b/types/react-loadable/tsconfig.json
index 4f1cf2c0f0..081e8b2577 100644
--- a/types/react-loadable/tsconfig.json
+++ b/types/react-loadable/tsconfig.json
@@ -18,6 +18,8 @@
     },
     "files": [
         "index.d.ts",
-        "react-loadable-tests.tsx"
+        "test/index.tsx",
+        "test/imports/no-default.tsx",
+        "test/imports/with-default.tsx"
     ]
 }