Issue with setting up Next.js E-commerce example and resolving the error related to the port.

37 replies

Last updated: Jan 25, 2021

Hi, I’m trying to set up the Next.js E-commerece example but I’ve ran into an issue. I get this error in console

(node:33819) UnhandledPromiseRejectionWarning: Error: Option requires argument: --port

. In the package.json-file I see that the script

"dev": "concurrently \"next --port $PORT\" \"cd studio && sanity start\"",

is trying to use a variable called $PORT (I’m assuming), but this variable isn’t defined anywhere in the example.

AI Update

The error you're encountering is because the $PORT environment variable isn't set in your system. This is a common issue with the Next.js e-commerce example starter.

The Quick Fix:

You have a few options to resolve this:

Set the PORT environment variable before running the dev command:
```
PORT=3000 npm run dev
```
Create a .env.local file in your project root and define the PORT:
```
PORT=3000
```
Modify the package.json script to hardcode a port instead of using the variable:
```
"dev": "concurrently \"next --port 3000\" \"cd studio && sanity start\"",
```

Why This Happens:

The example assumes you'll have a PORT environment variable set, but it's not included in the starter template by default. The $PORT syntax is trying to reference this environment variable (on Unix-based systems; on Windows you'd use %PORT%).

Recommended Approach:

I'd suggest option 3 (hardcoding the port in package.json) for local development since it's the simplest and most reliable across different operating systems. Port 3000 is the standard Next.js development port. The Sanity Studio will run on its default port 3333.

If you need different ports for any reason, just change the number in the script. The important thing is that Next.js and Sanity Studio run on different ports so they don't conflict.

The studio runs on port

, but the guide says it will run on

localhost:3000/studio

I used the “Create project” thing

Maybe I’m not suppose to run

npm run dev

. But I also have some issues with Vercel when using

npm start

I think you can pass in a port like so:

$PORT=3000 npm run dev

…but you might as well remove the --port argument together with $PORT in your package.json script!

the template rewrites

/studio

to localhost:3333 for you, I think that’s why in the guide it saids localhost:3000/studio

I think it assumes that you use

vercel dev

I’m not sure where to go from here

vercel login

to get a new token, then I assume you need to link it to a Vercel project?

I ran into the same confusion on how to run it when testing the project, but I had it setup on Vercel through https://create.sanity.io/

Seems like the login helped a bit. Next runs, but the studio (localhost:3000/studio) loads until I get a 5xx error

I also noticed

sanity.json

has this in it:

  "api": {
    "projectId": "placeholder",
    "dataset": "placeholder"
  },

I tried with placeholder and with my projectId and dataset

Error occurred proxying <http://localhost:3333/studio> Error: connect ECONNREFUSED 127.0.0.1:3333
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1146:16) {
  errno: -61,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 3333
}

looks like the studio is not running on port 3333

could you cd into /studio & run

sanity start

Yeah, the studio runs fine that way

cool, you should be able to go to localhost:3000/studio now I think

(http://localhost:3333 probably when using the standard port with

sanity start

)

Is there anyway to make it work without having two terminal windows?

It works if I run

sanity start

in one window and

npm start

in another

the

npm run dev

is supposedly the one that’ll run both in one window

npm run dev

in the root should start both your Next and Sanity development servers on localhost:3000 and localhost:3333, respectively

Then I get the port problem again

you could try

PORT=3000 npm run dev

, or just remove the whole ‘--port $PORT’ part

Ah, I see. I tried that earlier with the $ sign first.

my bad, I think I might have mistakenly left that in 😛

Ok, now it runs fine.

Thanks 🙂

Looks like it's missing an environment variable there. You could do as Derek suggested or create a

.env

file in your project root folder with this content:

PORT="3000"

The example .env didn’t contain that variable. I also tried adding that, but it doesn’t seem to do anything

(Or rename

.env.test

.env

and add that variable there)

Sorry about the confusion, Ole, we'll update the starter to include that information 🙂

NODE_ENV=PORT

works

I don’t know what the

sign means, but on macOS it doesn’t seem to read it from .env with it

For simplicity, we should probably just adapt it to run

next

in dev instead, without the

--port

flag:

    "dev": "concurrently \"next\" \"cd studio && sanity start\"",

Updated the starter itself as well now. Thanks for the feedback, Ole - and thanks for helping out, Derek 🙌

For simplicity, we should probably just adapt it to run

next

in dev instead, without the

--port

flag:

    "dev": "concurrently \"next\" \"cd studio && sanity start\"",

Updated the starter itself as well now. Thanks for the feedback, Ole - and thanks for helping out, Derek 🙌

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for free Explore the demo

Issue with setting up Next.js E-commerce example and resolving the error related to the port.

Sanity – Build the way you think, not the way your CMS thinks

Was this answer helpful?