Why are modules used in getStaticProps() bundled in the static output? #12615

zeekrey · 2020-05-07T20:24:11Z

zeekrey
May 7, 2020

Hey there,

I got a problem with next.js on firebase functions/hosting and was wondering why modules used in getStaticProps() are bundled in the final static output.

In my getStaticProps() functions I load, transform and store images from a headless cms. I thought, next will do this only during build phase and only once. After this all the code within the getStaticProps() is not required anymore. But if I go to the dist folder I can see that there is a pagename.js where all the modules from my getStaticProps() are required.

The firebase problem: Testing, Building and even emulating with firebase emulators works great. Only the deployed version throws internal server errors, complaining that a required module is missing. And that module is used within getStaticProps(), that's why I'm having a really hard time to debug this issue.

Can someone explain what I'm doing something wrong? :(

Answered by Timer

May 7, 2020

Are you sure you're not looking at the server bundle? Be sure you're in the client directory.

Can you please share your full page file?

View full answer

Timer · 2020-05-07T20:59:46Z

Timer
May 7, 2020
Maintainer

Are you sure you're not looking at the server bundle? Be sure you're in the client directory.

Can you please share your full page file?

3 replies

zeekrey May 7, 2020
Author

Ah, you're right. I was looking at the server bundle. Sorry. But I still don't understand why firebase is trying to execute this. I thought, after the build process next.js should serve the static content without any code execution. :(

This is the page file:

import React from 'react'
import { format, parseISO } from 'date-fns'
import { getEntries } from '../lib/contenfulHelpers'
import prepareImage from '../lib/prepareImage'

import NavBar from '../components/NavBar'
import Body from '../components/Body'
import Event from '../components/Event'

function events({ entries, assets }) {
    const [events, setEvents] = React.useState(entries)

    return (
        <Body>
            <NavBar />
            {events.map((event, index) => (
                <Event
                    key={index}
                    event={{
                        id: event.sys.id,
                        headline: event.fields.title,
                        description: event.fields.description,
                        image: assets[index],
                        date: event.fields.date
                            ? format(parseISO(event.fields.date), 'd.M.yyyy')
                            : '',
                        duration: event.fields.duration,
                        isEvent: event.fields.event,
                    }}
                />
            ))}
        </Body>
    )
}

export async function getStaticProps() {

    const entries = await getEntries({
        content_type: 'capybaraAusgehtipp',
        order: 'sys.createdAt',
    })

    const assets = await Promise.all(
        entries.map(
            async (entry) =>
                await prepareImage(
                    `https:${entry.fields.picture.fields.file.url}`,
                    entry.fields.picture.sys.id
                )
        )
    )

    return { props: { entries, assets } }
}

export default events

And this is what the firebase functions execution says (only if deployed, as mentioned, emulation works):

2020-05-07T21:27:24.695108004Z D nextjs-server: Function execution started
2020-05-07T21:27:24.809Z ? nextjs-server: { Error: Cannot find module 'potrace'
2020-05-07T21:27:24.809Z ? nextjs-server:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
2020-05-07T21:27:24.809Z ? nextjs-server:     at Function.Module._load (internal/modules/cjs/loader.js:562:25)
2020-05-07T21:27:24.809Z ? nextjs-server:     at Module.require (internal/modules/cjs/loader.js:692:17)
2020-05-07T21:27:24.809Z ? nextjs-server:     at require (internal/modules/cjs/helpers.js:25:18)
2020-05-07T21:27:24.809Z ? nextjs-server:     at Object.8OdQ (/workspace/dist/client/server/static/5vhB7eOoVeacpxhlo79kB/pages/events.js:465:18)
2020-05-07T21:27:24.809Z ? nextjs-server:     at __webpack_require__ (/workspace/dist/client/server/static/5vhB7eOoVeacpxhlo79kB/pages/events.js:23:31)
2020-05-07T21:27:24.809Z ? nextjs-server:     at Object.RC3E (/workspace/dist/client/server/static/5vhB7eOoVeacpxhlo79kB/pages/events.js:1799:65)
2020-05-07T21:27:24.809Z ? nextjs-server:     at __webpack_require__ (/workspace/dist/client/server/static/5vhB7eOoVeacpxhlo79kB/pages/events.js:23:31)
2020-05-07T21:27:24.809Z ? nextjs-server:     at Module.IE+K (/workspace/dist/client/server/static/5vhB7eOoVeacpxhlo79kB/pages/events.js:494:75)
2020-05-07T21:27:24.809Z ? nextjs-server:     at __webpack_require__ (/workspace/dist/client/server/static/5vhB7eOoVeacpxhlo79kB/pages/events.js:23:31) code: 'MODULE_NOT_FOUND' }
2020-05-07T21:27:24.898205709Z D nextjs-server: Function execution took 204 ms, finished with status code: 500

Timer May 7, 2020
Maintainer

To confirm: you can see here that Next.js properly eliminated all of the code from the client-bundle.

Regarding this issue, it sounds like you are deploying the server bundle to Firebase instead of the static HTML output. This is likely a problem in your deployment setup, unrelated to Next.js.

zeekrey May 19, 2020
Author

Ah, you are right. Thank you so much for your fast reply. Looks like I needed to change the deployment script. The whole firebase hosting + functions + next setup isn't that easy to maintain. ☕

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Why are modules used in getStaticProps() bundled in the static output? #12615

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Why are modules used in getStaticProps() bundled in the static output? #12615

Uh oh!

zeekrey May 7, 2020

Replies: 1 comment · 3 replies

Uh oh!

Timer May 7, 2020 Maintainer

Uh oh!

zeekrey May 7, 2020 Author

Uh oh!

Timer May 7, 2020 Maintainer

Uh oh!

zeekrey May 19, 2020 Author

zeekrey
May 7, 2020

Replies: 1 comment 3 replies

Timer
May 7, 2020
Maintainer

zeekrey May 7, 2020
Author

Timer May 7, 2020
Maintainer

zeekrey May 19, 2020
Author