Lodable cannot find 'x' in stats

šŸ™‹Get Help
1

Hi,

I would like to use ā€˜lodableā€™ in order to split my routes into various bundles.

But when iā€™m trying to use it, I get this kind of error:
ā€œInvariant Violation: loadable: cannot find ā€˜xā€™ in statsā€.

Here is a code snippet of my index.js:

import React from "react";
import Switch from "@frontity/components/switch";
import { connect, loadable } from "frontity";

// main templates
import MainFooter from "../templates/main-templates/main-footer";

// inner templates
import HomePage from "../templates/inner-templates/home-page";

// lodable templates
const About = loadable(() => import("../templates/inner-templates/about"));
const Properties = loadable(() => import("../templates/inner-templates/properties"));

// global style
import GlobalStyle from "../global-style";

const Root = ({ state }) => {
  const data = state.source.get(state.router.link);

  return (
    <>
      <GlobalStyle />
        <Switch>
            <HomePage when={data.isHome} />
            <About when={data.link === "/about/"} />
            <Properties when={data.link === "/properties/"} />
        </Switch>

      <MainFooter />
    </>
  );
};

export default connect(Root);

How can I solve this issue ?

TNX !

2

Have you tried doing it the way Mars theme does it?

list.js
export default loadable(() => import("./list"));

Not tried it but maybe worth looking at?

Looks like it should essentially be the same though?

3

I triedā€¦ steel get the same error

4

It would help to see a bit more code than this snippet, since the problem is most likely in one of the 2 scripts you try to load with loadable(), and based on the message an education guess would be that you have an array or object called stats and use a key x which isnā€™t set properly.

1 Like
5

Tagging this thread as it seems to be a similar issue

6

Hi Johan, thanks for your response.

This is the link to the rep

(The last commit is without the route code-splitting).

TNX !

7

I did some research, and checked out your repo.

As far as I can see you do everything correct, however Iā€™m not an expert :wink:
And I tried to run it locally, but obviously failed without access to your (local) api.

However I did notice the same error on Google, which is related to the chunkNames created by Webpack. As far as I could understand it the problem was caused by having additional - in file or directory names which can mess up Webpack (although I didnā€™t notice any direct problems when building your project).

In my own project I have something like this, which is basically identical to what you have, and it works without any problems.

// theme/index.js

import { connect, Head, loadable } from "frontity";
import Switch from "@frontity/components/switch";

const Loading = loadable(() => import('./loading'));
const PageError = loadable(() => import('./page-error'));
// more components, both direct and through loadable

const Theme = ({ state }) => {
    // Get information about the current URL.
    const data = state.source.get(state.router.link);

    return (
        <>
            {/* ... */}
            <Switch>
                {/* ... */}
                <Loading when={data.isFetching} />
                <PageError when={data.isError} />
            </Switch>
            {/* ... */}
        </>
    );
};

export default connect(Theme);
8

Hi @dor,

Can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions to technical issues with specific code

Detailing the info suggested here when having issues will help the community to provide the best possible help as quickly and as efficiently as possible.

Your Github repository should work directly in codeSandbox using this link: https://codesandbox.io/s/github/Sani-admin/test

Can you specify the errors youā€™re getting and prepare the repository to throw just the error reported in this thread?

In the meantime, here you have the documentation for Code Splitting with Frontity

In this case Frontity is just centralizing the use of the Loadable Components library

so have a look at their docs to learn more about how to use this library in specific use cases

It seems this issue has already been reported in their repository:

9

Hi Juanma, thanks for your response.

This is the link to the repo.

(You should clone the repo, and then run the project in your local environment with the ā€˜npx run devā€™ command).

10

Right now I see that after I ran ā€˜npx frontity buildā€™ the code splitting works well. I donā€™t sure why but at least it works wellā€¦ :sweat_smile:

TNX