CODEWITHSUNDEEP
javascriptasynchronousnext.js
Gutelaunetyp
Gutelaunetyp

Reputation: 1882

Next.js getInitialProps - dynamic routing does not work in production

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.

Upvotes: 1

Views: 2555

Answers (1)

kachar
kachar

Reputation: 2548

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.

Upvotes: 1

Related Questions