CODEWITHSUNDEEP
javascriptreactjsnext.js
K20GH
K20GH

Reputation: 6281

React/Next.js Object is not a function

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

Upvotes: 1

Views: 6837

Answers (4)

DiaMaBo
DiaMaBo

Reputation: 2287

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

Upvotes: -1

cahit beyaz
cahit beyaz

Reputation: 5137

You should import useRouter from nextjs not from react

Correct:

import { useRouter } from 'next/router'

Wrong:

import {  useRouter } from 'react';

Upvotes: 2

Prabhu
Prabhu

Reputation: 768

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"

Upvotes: 5

Carmelo Catalfamo
Carmelo Catalfamo

Reputation: 93

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

Upvotes: 0

Related Questions