Next.js: TypeError: Object(...) is not a function

[rodrigooler]

There is a strange error occurring, I have created a HOC to check if the user is logged in or not and then proceed as follows.

return <Component user = {user} {...props} />

The error is probably about {... props}, has anyone ever dealt with this problem?

One thing that happens is that this error only appears when I'm running yarn build && yarn start

[timneutkens]

Potentially it's related to the spaces you're adding. Try this:

<Component user={user} {...props} />

Going to close this as it's not following the issue template.

[rodrigooler]

@timneutkens unfortunately it's not the space problem this started to become common in version 7.0.2

[rodrigooler]

@timneutkens this is the HOC I'm using in the pages/ components

import idx from 'idx'
import * as React from 'react'

import Loading from '~/atoms/Loading'
import Maintenance from '~/organisms/Maintenance'
import Dashboard from '~/pages/dashboard'
import Login from '~/pages/login'
import { initUser, IUser, user, userInitialState } from '~/states/userState'

interface IState {
  isLoading: boolean
  user: IUser
}

export default function withAuth(
  Page: React.ReactNode,
  isHome: boolean = false,
) {
  return class extends React.Component<{}, IState> {
    public state = {
      isLoading: true,
      user: userInitialState,
    }

    public componentDidMount() {
      // @TODO: Improve Reworm
      user.subscribe(user => this.setState({ user }))
      initUser()

      this.setState({ isLoading: false })
    }

    public render() {
      const {props} = this
      const { isLoading, user } = this.state

      const token = idx(user, _ => _.token)

      if (isLoading) {
        return <Loading render={isLoading} />
      }

      if (false) {
        return <Maintenance />
      }

      if (token && !isHome && Boolean(Page)) {
        return <Page user={user} {...props} />
      }

      if (token) {
        return <Dashboard user={user} {...props} />
      }

      if (!token) {
        return <Login {...props}/>
      }
    }
  }
}

[joshpitzalis]

Not sure why this was closed. I'm having the same problem when using typescript.

[joshpitzalis]

import Layout from '../components/Layout';
import Steps from 'antd/lib/steps';
import { useState } from 'react';

const OnboardingSteps: React.SFC<{
  step: number;
}> = props => (
  <Steps current={props.step}>
    <Steps.Step
      title="Invite Your Partner"
      description="This is a description."
    />
    <Steps.Step
      title="Discard Shitty Missions"
      description="This is a description."
    />
    <Steps.Step title="Play" description="This is a description." />
  </Steps>
);

const Index = () => {
  const [step, changeStep] = useState(0);
  return (
    <Layout>
      <p className="f1 b tc">Welcome To Marital Bliss</p>
      <OnboardingSteps step={step} />
      <button onClick={() => changeStep(step + 1)}>Next</button>
    </Layout>
  );
};

export default Index;

[joshpitzalis]

if I remove the const [step, changeStep] = useState(0); line everything works fine. It doesn't like me retuning an object as the functional state component.

[joshpitzalis]

unrelated, sorry.
I was using hooks with the default react 16.
npm i react@next react-dom@next fixed this.

[rodrigooler]

@joshpitzalis I decided to remove the localStorage and using cookie had problems due to being SSR, my HOC tried to get the localStorage on the server side and finished giving problem with spread object. If you are using HOC for authentication I recommend you use cookies to solve it.

[James-Quigley]

Also having this issue. Everything works locally, only fails once I try to deploy to now.sh. The build step passes, but when I hit my index page, I get this error. I am also using react hooks.

[phocks]

I was getting this error using Next.js and for me it was caused by trying to destructure a function that didn't exist in an npm module. eg import { loadRecaptcha } from "recaptcha-v3"; instead of import { load } from "recaptcha-v3"; and then trying to run it in an async function.

[rodrigooler]

@phocks I was able to resolve this error because of some disruption that was occurring in the HOC, so as I am no longer using this HOC the problem was resolved. 100% that was faulty in my code.