"Upgraded required" in a Nuxt.js Repl

I’m using a Boosted replit to run NUXT 3.0. I’m getting the message on my webview when I try to access it.

Do I need to buy cycles? My replit resources don’t seem to be used as much.

Appreciate your help.

1 Like

Welcome to the community @LucasSchirm! Does it work when you view it out of the web view?

1 Like

In the meantime also bought cycles and did more upgrades, without success.

I Changed my replit configuration file to be able to boot it using the run button, then I got to run it without the webview.

This seems to be a Nuxt.js error, not anything wrong with the Repl in particular. What happens if you delete the build folder and rebuild?

3 Likes

I removed .nuxt, node_modules and package-lock and started with a fresh install. No success.

Message seems to came from replit/devtools

The injected URL is https://94f2b423-7c65-4ff8-890a-cd4dd6e5ecb2.id.repl.co/__replco/devtools_wrapper.html

The Error seems to be coming from what is not part of Vue or Nuxt.

2 Likes

@dragonhunter1 @IroncladDev

I tried to create a public repo with nuxt 3 ssr:true to test without any of my custom setup and still show upgrade required.

https://replit.com/@LucasSchirm/Nuxt-3-Basic-Setup

Also add this, since other people seems to be going throught the same issue.

What happens when you update to node.js v18?

1 Like

Is actually already running on v18.12.1! The github post is not mine, is another person with the same issue.

image

Did you find anything else by any chance?

I’m sorry, I’m very unfamilliar with Nuxt.js. I’ll pass it along to someone who’s familliar with the stack.

cc @TheDrone7

1 Like

I got a response, there is an issue with ports. Make sure you’re exposing the host 0.0.0.0 with your application.

It’s an issue with the ports, nuxt runs 2 servers 1 for the actual site itself and one that actively builds the site for hmr and stuff. Replit often exposes the wrong port cuz the one that is needed to build the project starts first and displays “Upgrade required” and then even when the other server, which is the actual site starts, does not get exposed. (edited)

You can configure port exposing in Replit as shown here: https://docs.replit.com/programming-ide/configuring-repl#ports

1 Like
~/Nuxt-3-Basic-Setup$ netstat -tulpn | grep node
tcp        0      0 0.0.0.0:3000            0.0.0.0:*               LISTEN      3563/node           
tcp6       0      0 :::24678                :::*                    LISTEN      3563/node 

Try setting the externalPort to 24678 and the localPort to 3000.

1 Like

Thank you will try it later today.

I got the netstat working, but couldn`t get it to look like yours.

I tried to set the host as on the RIGHT doc (Nuxt Configuration) and also tried to use the script change below:

    "dev": "nuxt dev --hostname '0.0.0.0' --port 3000",

When I run dev I get:

~/Nuxt-3-Basic-Setup$ netstat -tulpn | grep node
tcp6       0      0 :::3000                 :::*                    LISTEN      112/node            
tcp6       0      0 :::24678                :::*                    LISTEN      112/node  

EDITED

I changed the HOST secret for the replit to 0.0.0.0

~/Nuxt-3-Basic-Setup$ netstat -tulpn | grep node
tcp        0      0 0.0.0.0:3000            0.0.0.0:*               LISTEN      126/node            
tcp6       0      0 :::24678                :::*                    LISTEN      126/node   

But still get "Updated Required"on the webview and when I open the URL from regular browser.

Also tried to remove “node_modules” and package-lock.json after getting the right set for netstat

1 Like

@TheDrone7 anything else I could try before moving to GitHub?

TheDrone7 seemed to have gotten Nuxt to work in a Repl, in a direct fork of yours.

https://replit.com/@TheDrone7/Nuxt-3-Basic-Setup

1 Like

Thank you for sharing @IroncladDev

IT WORKED! Thank you.

Saw that he added the doors as we spoke before on this thread, but the configuration was as below, for anyone trying to achive the same.

Edit your replit file:

[[ports]]
localPort = 24678
externalPort = 24678

Steps that I had to do:

  • On the files context menu click on “Show hidden files”
  • Open the replit file to edit
  • Add doors configuration
  • Open the shell script and type in “kill 1” to restart your replit.
2 Likes

that seems to get the nuxt page to load but hmr doesnt work. How do we expose port 24678 properly so hmr works?

From the docs, " Currently only ports 5900 , 8099 , 9000 are allowed as the externalPort"

I haven`t tried it to be honest, do you have a public replit you are using to test?

maybe change the nuxt.config.ts file

  vite: {
    server: {
      hmr: {
        port: 9000
      }
    }
  }

And use an externalPort 9000 in .replit.