why is Loadable Components throwing a requireAsync .then is not a function error

Question

I'm trying to code-split a big file and have it lazily load async when needed.

Chrome dev tools is showing this error (see pic) when I try to click to the affected part of the webapp. Suggests I've not set something up properly, but i am following the docs and cant see much different.

My code is as folows:

routes.js - matches routes and returns react containers. AsyncSignupPage.js - literally just imports Signup and makes it 'loadable' / async. Signup.js - the actual signup page container.

routes.js:

const routes = [
   ...
   {
    component: () => <AsyncSignupPage />,
    path: "/signup/:page",
    exact: true
   }
   ...
]

AsyncSignupPage.js:

import React from "react";
import loadable from '@loadable/component';

const AsyncSignupPage = loadable(() => <div>This was lazily loaded</div>)

export default AsyncSignupPage;

I have left AsyncSignupPage just returning a div for now, as that alone creates this issue.

What am i doing wrong here?