Can no longer access builder visual editor or localhost on dev server - iframe doesn't exist

Technical Questions
,
1

Builder content link

Builder public api key
fdb329cc3b4a4cf2acde507eef57e17b

What are you trying to accomplish
I want to run my local server and edit my nextjs app using the builder visual editor

Code stack you are integrating Builder with
NextJS

Hi,

I am currently still using http://localhost:3000 for development of a nextjs app with builderIO. I was having no issues and was able to use the visual editor to create a navbar and other elements in the different pages. Then randomly the site was not loading and since then it has not been able to load. This was a few weeks ago. I work from a shared repo with other developers who are not experiencing the same issue, it is only me. We all have the same code.

I get the following error in my terminal when I run npm run dev and access either http://localhost:3000 or the content link:

- wait compiling /[[...page]]/page (client and server)...
- event compiled client and server successfully in 436 ms (475 modules)
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11522:11)
    at async invokeRequest (/Users/.../central/ecrf-website/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
    at async invokeRender (/Users/.../central/ecrf-website/node_modules/next/dist/server/lib/router-server.js:253:29)
    at async handleRequest (/Users/.../central/ecrf-website/node_modules/next/dist/server/lib/router-server.js:446:24)
    at async requestHandler (/Users/.../central/ecrf-website/node_modules/next/dist/server/lib/router-server.js:463:13)
    at async Server.<anonymous> (/Users/.../central/ecrf-website/node_modules/next/dist/server/lib/start-server.js:117:13) {
  cause: SocketError: other side closed
      at Socket.onSocketEnd (/Users/.../central/ecrf-website/node_modules/next/dist/compiled/undici/index.js:1:63301)
      at Socket.emit (node:events:523:35)
      at endReadableNT (node:internal/streams/readable:1367:12)
      at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
    code: 'UND_ERR_SOCKET',
    socket: {
      localAddress: '::1',
      localPort: 64969,
      remoteAddress: '::1',
      remotePort: 64914,
      remoteFamily: 'IPv6',
      timeout: undefined,
      bytesWritten: 779,
      bytesRead: 0
    }
  }
}

Here is what the console says when I try to access the visual editor:

Screenshot 2023-09-12 at 14.59.53
Screenshot 2023-09-12 at 14.59.53566×866 113 KB

Could anyone help?

Thanks.

2

Hello @ayesha,

Welcome to the builder.io forum!

Can you try deleting the node_modules folder and then do the npm install?

Let us know how that works for you. Thank you!

3

Hi @manish-sharma

I have tried that and I am still getting the same error.

Thanks,

Ayesha

4

Hello @ayesha,

The “UND_ERR_SOCKET” error you are encountering while running a Next.js application locally appears to be specific to your development environment or setup.

Please check following

  1. Ensure that all the required dependencies for your Next.js application are correctly installed. You can do this by running npm install or yarn install in your project directory.

  2. Make sure you are using a compatible version of Next.js for your project. Check if there are any updates available for Next.js and update it if necessary as per the global repo.

  3. It’s possible that the port your Next.js application is trying to use is already in use by another process. Try changing the port in your Next.js configuration to see if that resolves the issue.

Let us know how that works for you.

Thank you!