Invariant Violation: loadable: cannot find home in stats

🙋Get Help
1

Hello,
while i was using loadable in index.js of home component, I got this error

Invariant Violation: loadable: cannot find home in stats

and here is my index file and home component code,

index.js
    import { loadable } from "frontity";
    export default loadable(() => import("./home"));

home.js

 import React from "react";
import { connect } from "frontity";
import TopArticle from "./topArticle";
import ListArticle from "./listArticle";
import LatestArticle from "./latestArticle";
/**
 * call all api and fetch data here and show loading from here after render child component
 */
const Home = ({ themeMode }) => {
  return (
    <>

      {/* call api and show loading until get all articles */}
      <TopArticle />
      {/* call api and show loading until get all list articles */}
      <ListArticle themeMode={themeMode} />
      <LatestArticle themeMode={themeMode} />
    </>
  );
};
export default connect(Home);
3

Hi @mehul

The idea behind loadable is to automatically create single bundles for specific components so they can be dynamically loaded on runtime

The way you’re using loadable is not the way it works. Have a look at Code Splitting to see proper explanation and examples

  • You don’t export loadable components, your components are exported normally
  • loadable takes into account when components are imported (have a look at this example)
  • loadable makes sense for components that doesn’t need to be loaded in every page (maybe your home component is not the best use case for loadable)

Hope this helps

1 Like
4

@juanma thank you

1 Like
7

Hello @juanma
i can’t understand what’s problem, i am getting same error
i already posted my home component and index file, let me explain you how i want to use loadble
when user visit to home it should not load isPost component and it’s working fine, but if user directly visit to blog url then it should not load home component it will load only post component, but there is same error for home component
here is code of index where i import both home and blog component

import React from "react";

import { ThemeProvider } from "emotion-theming";

import { connect, Head , loadable} from "frontity";

import { Box } from "rebass";

import { useDarkMode, GlobalStyle, Nav, Slider } from "../components";

import { lightTheme, darkTheme } from "../common/theme";

import Home from "./home/";

import Footer from "./footer";

import Header from "./header";

const BlogPost = loadable(() => import("./post"), {

    fallback: <div>Loading...</div>,

});

const Home = loadable(() => import("./home/"), {

    fallback: <div>Loading...</div>,

});

const Theme = ({ state, libraries, link }) => {

    const [theme, toggleTheme] = useDarkMode();

    const themeMode = theme === "light" ? lightTheme : darkTheme;

    const data = state.source.get(state.router.link);

    return (

        <ThemeProvider theme={themeMode}>

            <Head>

                <meta name="description" content={state.frontity.description} />

                <meta name="viewport" content="width=device-width, initial-scale=1.0" />

                <html lang="en" />

            </Head>

            <GlobalStyle />

            <Header

                theme={theme}

                onClick={() => {

                    toggleTheme();

                }}

            />

            {(data.isArchive && (

                <>

                    <Slider />

                    <Nav.Container theme={themeMode}>

                        <Nav.Search />

                        <Box mx="auto" alignItems={"center"} justifyContent={"center"} />

                        <Nav.Item text={"CES 2020"} />

                        <Nav.Item text={"iPhone 11 Pro"} />

                        <Nav.Item text={"Apple Watch 5"} />

                        <Nav.Item text={"iOs 13"} />

                        <Nav.Item text={"ipad Pro"} />

                        <Nav.Item text={"ipad Pro"} />

                        <Nav.Item text={"ipad Pro"} />

                        <Box mx="auto" />

                        <Nav.Add />

                    </Nav.Container>

                    <Home themeMode={themeMode} />

                </>

            ))

                || (data.isPostType && <BlogPost />)}

            <Footer themeMode={themeMode} />

        </ThemeProvider>

    );

};

export default connect(Theme);
8

Hi @mehul,

Can you provide a repository with the code of your project so the community can check it and help you with your issue?

9

@juanma here is my repo https://github.com/mehul-oscod/demo
suggestions are welcome.

10

@mehul Thanks for providing the repo. It’s much more easy to help with this.

I have created two Pull Requests to your repo:


The second one just cleans a little bit the code in order to explain how loadable is working as expected

Hope this helps

1 Like
11

@juanma thank you so much for fast response and its working fine,
but can you tell me why i can not directly use loadable with homepage as i was trying before.