React/Next.js Object is not a function

Question

I'm using Next.js to render an application. In my pages, I have /index which is wrapped in my Dashboard layout. This works absolutely fine, without any issue.

I also have /item and /add-item within my pages that is also wrapped in my Dashboard layout, however when I call anything other than /index, I get the following error:

TypeError: Object(...) is not a function
    at Object../pages/index/index.js (C:\Users\User\Documents\Projects\Project\project-next\src\.next\dist\bundles\pages\item.js:2837:138)

What confuses me is why /item is failing at /index when going to /index directly works fine. If I comment out the export within /index like so, then going to /item or any other page that is wrapped in Dashboard works:

//export default Dashboard(Index);

My files are as follows:

/layout/Dashboard/index.js

import React from 'react';
import Head from 'next/head';
import hoistNonReactStatics from 'hoist-non-react-statics';

import Header from './Header';
import Sidebar from './Sidebar';
import Login from '../../pages/login';

import checkUser from '../../utils/checkUser';
import redirect from '../../utils/redirect';

import './normalize.less';
import styles from './styles.less';

const Dashboard = ComposedComponent => {
  class Decorator extends React.Component {
    static async getInitialProps(ctx) {
      const props = {
        isAuthenticated: true,
        data: {
          name: 'dave',
        },
      };
      return props;
    }

    render() {
      if (!this.props.isAuthenticated) {
        return <Login />;
      }

      const layout = children => (
        <React.Fragment>
          <Head>
            <title>Project</title>
            <link
              href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
              rel="stylesheet"
            />
            <link
              rel="stylesheet"
              href="https://unpkg.com/antd@3/dist/antd.min.css"
            />
            <link
              rel="apple-touch-icon"
              sizes="57x57"
              href="../static/icons/apple-icon-57x57.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="60x60"
              href="../static/icons/apple-icon-60x60.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="72x72"
              href="../static/icons/apple-icon-72x72.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="76x76"
              href="../static/icons/apple-icon-76x76.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="114x114"
              href="../static/icons/apple-icon-114x114.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="120x120"
              href="../static/icons/apple-icon-120x120.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="144x144"
              href="../static/icons/apple-icon-144x144.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="152x152"
              href="../static/icons/apple-icon-152x152.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="180x180"
              href="../static/icons/apple-icon-180x180.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="192x192"
              href="/android-icon-192x192.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="32x32"
              href="../static/icons/favicon-32x32.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="96x96"
              href="../static/icons/favicon-96x96.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="16x16"
              href="../static/icons/favicon-16x16.png"
            />
            <link rel="manifest" href="../static/icons/manifest.json" />
            <meta name="msapplication-TileColor" content="#ffffff" />
            <meta
              name="msapplication-TileImage"
              content="../static/icons/ms-icon-144x144.png"
            />
            <meta name="theme-color" content="#ffffff" />
            <script
              defer
              src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"
              integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ"
              crossOrigin="anonymous"
            />
          </Head>
          <div>
            <Header />
            <Sidebar user={this.props.data} />
            <div className={styles.content}>{children}</div>
          </div>
        </React.Fragment>
      );

      return layout(
        <React.Fragment>
          <ComposedComponent {...this.props} />
        </React.Fragment>
      );
    }
  }

  hoistNonReactStatics(Decorator, ComposedComponent);

  return Decorator;
};

export default Dashboard;

/pages/item/index.js

import React from 'react';

import Dashboard from '../../layout/Dashboard';

import styles from './styles.less';

class Item extends React.Component {
  constructor() {
    super();
    this.state = {
      loaded: true
    };
  }

  render() {    
    return (
      <div>
        <p>Item</p>
      </div>
    );
  }
}

export default Dashboard(Item);

and finally

/pages/index/index.js

import React from 'react';   
import Dashboard from '../../layout/Dashboard';

import styles from './styles.less';

class Index extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {

    return (
      <div>
        <p>Index</p>
      </div>
    );
  }
}

export default Dashboard(Index);

As I say, going to localhost:3008 loads index within the Dashboard layout just fine. Going to anything else that loads the Dashboard layout, ie item in this example throws the error

Prabhu · Accepted Answer · 2020-12-07 14:57:30Z

5

I had the same issue i changed the react and react-dom version to 'next' in package JSON and it got resolved.

"react": "next", 
"react-dom": "next"

answered Dec 7, 2020 at 14:57

Prabhu

7685 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

EL-Mehdi Loukach Over a year ago

But why ? the whole point is to know where the problem was ?

cahit beyaz · Accepted Answer · 2021-01-10 20:07:25Z

2

You should import useRouter from nextjs not from react

Correct:

import { useRouter } from 'next/router'

Wrong:

import {  useRouter } from 'react';

answered Jan 10, 2021 at 20:07

cahit beyaz

5,2271 gold badge32 silver badges27 bronze badges

Comments

Carmelo Catalfamo · Accepted Answer · 2018-04-25 09:54:36Z

0

With nextjs you should have only one file per page in a pages folder. I see that you have files like /pages/item.index.js.. try to use a schema like that:

pages
- page1.js
- page2.js
components
- page1
  - page-1-component-1.js
  - page-1-component-2.js
- page2
  - page2-component.js

answered Apr 25, 2018 at 9:54

Carmelo Catalfamo

931 gold badge4 silver badges15 bronze badges

3 Comments

K20GH Over a year ago

Hi, That is how I have it structured. layout/Dashboard/index.js and then /pages/index/index.js, /pages/item/index.js, /pages/add-item/index.js

Carmelo Catalfamo Over a year ago

I used little nextjs but I would try to move /pages/index/index.js to /pages/index.js, /pages/item/index.js to /pages/item.js, /pages/add-item/index.js to /pages/add-item.js

K20GH Over a year ago

That shouldn't matter as pages is used to route, so whether its individual folders or files, it doesn't make a difference. I tried it anyway but the issue still remains

DiaMaBo · Accepted Answer · 2021-04-06 05:23:38Z

-1

I had the same issue but my mistake was to create a file inside pages with three dots(...) as follow. Please rename /pages/api/notes/[...id].js to /pages/api/notes/[id].js

rename file name as follow

[...id].js => [id].js

answered Apr 6, 2021 at 5:23

DiaMaBo

2,3171 gold badge22 silver badges19 bronze badges

Collectives™ on Stack Overflow

React/Next.js Object is not a function

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related