Unhandled Runtime Error in v1.34.0

[MoltenCoffee]

After upgrading to 1.34.0, the webapp is no longer accessible due to a runtime error.
(Build on the server, Debian 11, node v16.16.0)

The full stacktrace, as provided by Next.js:

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'parentNode')

Call Stack
options.insert
webpack-internal:///./styles/variables.css (21:52)
insertStyleElement
webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.js (91:17)
addStyle
webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.js (167:17)
modulesToDom
webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.js (69:26)
module.exports
webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.js (193:27)
eval
webpack-internal:///./styles/variables.css (30:14)
./styles/variables.css
file:///home/deploy/umami/.next/static/chunks/pages/_app.js (9439:1)
options.factory
/_next/static/chunks/webpack.js (649:31)
__webpack_require__
file:///home/deploy/umami/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (304:21)
eval
webpack-internal:///./pages/_app.js (16:78)
./pages/_app.js
file:///home/deploy/umami/.next/static/chunks/pages/_app.js (9527:1)
options.factory
/_next/static/chunks/webpack.js (649:31)
__webpack_require__
file:///home/deploy/umami/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (304:21)
eval
webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js (5:16)
eval
webpack-internal:///./node_modules/next/dist/client/route-loader.js (211:24)

[mikecao]

How does this error come up? Which page?

[MoltenCoffee]

It happens to me on every page, in 1.35.0 as well, but after some more digging it seems there is more going on in my install, I'm still figuring out if the problems are related or not (running umami after build works, but when restarting Next can't find a build anymore, and needs to be rebuild). Will update when I find out more!

[MoltenCoffee]

It might be a seperate issue, but I think there might be a bug with Next, as I can run yarn start as many times as I like without issue, but I can only run yarn start-env once, after that the build seems to be broken and needs to be rebuild.

[lucasjose501]

I'm also with this issue since 1.34, did a rollback to 1.33.1 and runs fine. I'm using yarn start-env to change the port because I have another app using 3000 on my server.

Exactly the same happens, it says that cannot find .next and asks to build again. Sometimes it says that port 3002 is already in use and tries to use 3003, 3004, etc.

Edit: Mine is running directly on Ubuntu 22.04, node v16.16.0

[mikecao]

So start-env was always a workaround since Next.js didn't natively support PORT as an environment variable. Something must have changed in their internals. You can however change it manually on the command line.

"script": {
  "start": "next -p 8080"
}

I'll keep digging to see what I can find about the latest versions of Next.

[MoltenCoffee]

It's possible to pass arguments to NPM scripts defined in package.json by using the double hyphen and then arguments (see here), wouldn't that be an option to use for port and/or hostname?

[mikecao]

I may be wrong, but I'm sure if it was that easy someone would have done it. Here is the original discussions about supporting PORT, vercel/next.js#23978

And here in the docs https://nextjs.org/docs/api-reference/cli it says:

Note: PORT can not be set in .env as booting up the HTTP server happens before any other code is initialized.

We went the custom script route and discussed here, https://stackoverflow.com/questions/70804091/using-env-file-to-specify-server-listening-port-of-the-next-js-server

Are you hosting on Heroku or some place that uses dynamic ports?

[MoltenCoffee]

Are you hosting on Heroku or some place that uses dynamic ports?

I am not, it's a VPS I control, with about 15 processes using different ports.

I did manage to find something, though:

{
  "scripts": {
    "start-env": "next start -p $npm_config_port -H $npm_config_host"
  }
}

And then running npm run start-env --port=5555 --host=0.0.0.0 seems to work flawlessly, on NPM 8.8.0 at least. This does not work with yarn (v1.22.15) though.

[mikecao]

I'm glad you were able to find a solution. However, it's not a universal one which is the problem. I don't understand why Next.js has to make this so difficult.

[wheeleran]

is this connected to the dashboard reloading in 1.36.1 in another ticket? i've just updated from 1.33.1 to 1.36.1 and need to roll back. how do i do that?