Next.js getInitialProps - 动态路由在生产中不起作用

Question

I use Next.JS version 9.1.3 and have dynamic routing (but static files with exportPathMap) in my project.

The routing works perfectly in development mode, but in production mode it does not work.

I get:

Error occurred prerendering page "/details/undefined": TypeError: Cannot destructure property baseDetails of 'undefined' or 'null'.

 import { Component } from 'react'; import getLocks from '../../data/helper/getLocks'; import PageTemplate from '../../components/PageTemplate'; import RenderLock from '../../components/RenderLock'; class details extends Component { static async getInitialProps({ query }) { return { lock: getLocks().find((el) => el.id === query.lockID) }; } render() { const { lock } = this.props; return ( <PageTemplate> <div> <RenderLock lock={lock} /> </div> </PageTemplate> ); } } export default details;

And RenderLock uses this:

const { baseDetails } = lock;

As I said, in development mode it works perfectly. baseDetails is existing.

But in production mode (if I did next build and next export ) it does not work.

Answer 1

This error can be encountered by having a non-page component inside the /pages directory.

You may try to move the details.js file to ../../components so it's not recognized as a static page.

This type of error is only visible while next-build is going through the step of Automatic Static Optimization . The same code executes fine in dev mode.