Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'NEXT_PUBLIC_APP_INSTANCE')

[AlfredYyong]

i try to deploy my own L2 explorer, but i encouter this problem, I'm not sure what went wrong.

I have success deploy backend + old ui, now i want to use new ui, and i follow this page :https://docs.blockscout.com/for-developers/deployment/manual-deployment-guide#id-5.-run-frontend to run frontend, keep getting an error about not being able to read undefined attributes (reading 'NEXT_PUBLIC_APP_INSTANCE')

frontend version: v1.26.1
.env config:
NEXT_PUBLIC_API_HOST=localhost
NEXT_PUBLIC_API_PORT=3001
NEXT_PUBLIC_API_PROTOCOL=http
NEXT_PUBLIC_NETWORK_NAME=op
NEXT_PUBLIC_APP_HOST=blockscout.com
NEXT_PUBLIC_STATS_API_HOST=http://localhost:8080
NEXT_PUBLIC_VISUALIZE_API_HOST=http://localhost:8081
NEXT_PUBLIC_NETWORK_CURRENCY_NAME=OP
NEXT_PUBLIC_APP_HOST=localhost
NEXT_PUBLIC_NETWORK_ID=67890
NEXT_PUBLIC_APP_PORT=3010
NEXT_PUBLIC_APP_ENV=development
NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL='ws'

[AlfredYyong]

like this, and i manual deploy, not docker.

[AlfredYyong]

i modify .env file, and now the broswser notice: GET http:///envs.js net::ERR_ABORTED 404 (Not Found).

To solve the cross-domain problem, I also configured the NGINX according to the ‘PROXY SETUP’ tutorials.

[AlfredYyong]

Now NEXT_PUBLIC_APP_INSTANCE doesn't show up, but nothing loads on my page. And my own chain is base on op-stack, backend + old ui can work.

[tom2drum]

The file should be accessed at the URL https://<your-host>/envs.js.
Also there should be a log about what is was created during the container start.

Example:

2024-03-13 22:45:29.702	✅ Done.
2024-03-13 22:45:29.698	🌀 Creating client script with ENV values...

[AlfredYyong]

thanks for quick reply~

yep you are right, when i run 'yarn dev', some problem exist. It looks like a problem with the Nodejs version, my nodejs version is 20.11.0, the recommended one is 18.x.x. , i will try to fix it.

thanks very much!