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 ment 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=":300,400,500"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="@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=".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
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 ment 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./css?family=Roboto:300,400,500"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://unpkg./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./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
4 Answers
Reset to default 5I 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"
You should import useRouter from nextjs not from react
Correct:
import { useRouter } from 'next/router'
Wrong:
import { useRouter } from 'react';
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
- ponents
- page1
- page-1-ponent-1.js
- page-1-ponent-2.js
- page2
- page2-ponent.js
- page1
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
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744375894a4571185.html
评论列表（0条）