getStaticPaths doesn't work with 'publicRuntimeConfig' from next/config

[diogotcorreia]

When I add getStaticPaths to a page, with or without params (e.g. pages/category/[category].js), the page doesn't compile anymore on development (it works fine if I build it and run with NODE_ENV=production).

I get the following error: TypeError: Cannot destructure property 'publicRuntimeConfig' of 'next_config__WEBPACK_IMPORTED_MODULE_7___default(...)(...)' as it is undefined., which corresponds to this:

import getConfig from 'next/config';

const { publicRuntimeConfig } = getConfig();

After reading the documentation for next/config, I still don't really understand if it should work or not. I've also seen the env documentation and it seems promising, but it would take a while to migrate everything from publicRuntimeConfig.

Also, removing getStaticPaths and keeping getStaticProps works fine (for pages without params obviously, you need getStaticPaths for dynamic pages). I don't have any logic inside getStaticPaths, it's just a return statement with all the required fields.

Does anyone have any idea what could be wrong or if this is a bug? I could look into migrating to env variables, but I'm not sure if they work on client-side (do they?).
Suggestions appreciated.

---

Edit:

Since I've forgotten and it might be useful, here are my system details:

• next version: 9.3.2
• nodejs version: 13.7.0
• OS: Windows 10 1909 (WSL using Ubuntu 18.04 LTS)

---

Edit 2:

I've just tested with a new next app, it still happens. Here is a Gist that reproduces it: https://gist.github.com/diogotcorreia/64a15ea521f829a7552a5a6ec7888d28

---

Edit 3:

This is expected behaviour: #12166

[Kersheh]

+1, just ran into this exact problem.

[diogotcorreia]

For anyone wondering, I've decided to move my config from publicRuntimeConfig to the env config.

A proper fix would still be appreciated.

[paeolo]

Just run into the exactly same issue.
@diogotcorreia IMHO it's a bug.

[diogotcorreia]

I'm just gonna convert this into an issue.
I've searched for an issue, this seems like expected behaviour.

#12166

[rafaelalmeidatk]

This is the expected behavior, publicRuntimeConfig does not work with static pages, here is why:

The runtime config can be created in next.config.js like this:

module.exports = {
  publicRuntimeConfig: {
    // Will be available on both server and client
    apiUrl: process.env.API_URL,
  },
}

As you can see the config can be based on an environment variable, it could be loaded from a .env file or could be loaded from the system (like API_URL=prod.com yarn start). The value of this config will be available in the server, so when a page is requested, the server will insert the apiUrl into the page scripts so your code can use it.

Now you have a page that uses getStaticProps, this means that the page content will be created at build time, after the build these config values aren't changed anymore.

So what happens if we build the app with API_URL=dev.com yarn build and start the server with API_URL=api.com yarn start (notice that I changed the value of API_URL)? Probably not what you expect, the server can't change the content of a page that has already been built to modify the publicRuntimeConfig.

This is why the docs states that the pages that use the publicRuntimeConfig should have getInitialProps (or getServerSideProps):

A page that relies on publicRuntimeConfig must use getInitialProps to opt-out of Automatic Static Optimization. Runtime configuration won't be available to any page (or component in a page) without getInitialProps.
Ref.: https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration

The static alternative to publicRuntimeConfig is the env config, where the values are read and inlined at build time:

module.exports = {
  env: {
    apiUrl: process.env.API_URL,
  },
}

This value will be available both for static and server-rendered pages, but can only be changed with a new build.

TL;DR: publicRuntimeConfig can change any time but static pages can only change with a build so they aren't compatible. Use the env config instead.

[paeolo]

Ok things are much clearer thank you!

A page that relies on publicRuntimeConfig must use getInitialProps to opt-out of Automatic Static Optimization. Runtime configuration won't be available to any page (or component in a page) without getInitialProps.

Just before having the issue, my page was statically optimized (_app.js) since I didn't use getServerSideProps or getInitialProps, but I could access publicRuntimeConfig with no issues.

So, if publicRuntimeConfig is not meant to be used in static pages, to prevent having two different values as you explained, then maybe the real issue here is:

1. It shouldn't be possible to use publicRuntimeConfig in static pages at all
2. If publicRuntimeConfig is used in a static page, trigger an explicit error message.

what do you think ?