TypeError: action.default is not a function

I have created a new route that works perfectly fine when I navigate to it from a different route via the Link Component but when I enter the url in the browser and open the page directly all I get is this TypeError:

TypeError: action.default is not a function
    at context.route.load.then.action ([....]/src/router.js:16:1)

I don’t really get what it’s trying to tell me.

My routes.js (the swiper route fails)

const routes = {
  path: '/',

  // Keep in mind, routes are evaluated in order
  children: [
    {
      path: '/',
      load: () => import(/* webpackChunkName: 'home' */ './home'),
    },
    {
      path: '/swiper',
      load: () => import(/* webpackChunkName: 'swiper' */ './swiper'),
    },

    // Wildcard routes, e.g. { path: '*', ... } (must go last)
    {
      path: '*',
      load: () => import(/* webpackChunkName: 'not-found' */ './not-found'),
    },
  ],

  async action({ next }) {
    // Execute each child route until one of them return the result
    const route = await next();

    // Provide default values for title, description etc.
    route.title = `${route.title || 'Untitled Page'} - x`;
    route.description = route.description || '';

    return route;
  },
};

And the swiper/index.js route:

function action() {
  return {
    chunks: ['swiper'],
    title: 'Swiper',
    component: (
      <Layout>
        <Swiper />
      </Layout>
    ),
  };
}

[frenzzy]

swiper/index.js must export action fn:

export default action;

[tusharkotlapure]

@damiangreen I am using react-quill lib, and when I use that component it is showing me the same error, for my other component page is rendering but only for this component it’s showing this error.