Builder io completely unusable, cannot deploy localhost project npm run build

[daedalus2]

Hello, I created a page using npm init builder.io@latest

√ Would you like to use TypeScript? … Yes
√ Would you like to use ESLint? … Yes
√ Would you like to use Tailwind CSS? … Yes
√ Would you like your code inside a src/ directory? … Yes
√ Would you like to use App Router? (recommended) … Yes
√ Would you like to use Turbopack for next dev? … No
? Would you like to customize the import alias (@/* by default)? » No

Then I integrated the components in localhost:3000

I then used builder to make three pages, then I tried to deploy but it failed.

I edited out buildercontent

Then here is something wrong with PageProps, I looked on Google they said someting about codemods, I applied it, error again, this builder.io is completely unusable!!!

C:\Users\User>cd builder-app

C:\Users\User\builder-app>npm run build

builder-app@0.1.0 build
next build

▲ Next.js 15.1.7

• Environments: .env

Creating an optimized production build …
✓ Compiled successfully
Linting and checking validity of types .Failed to compile.

.next/types/app/[…page]/page.ts:34:29
Type error: Type ‘PageProps’ does not satisfy the constraint ‘import(“C:/Users/User/builder-app/.next/types/app/[…page]/page”).PageProps’.
Types of property ‘params’ are incompatible.
Type ‘{ page: string; }’ is missing the following properties from type ‘Promise’: then, catch, finally, [Symbol.toStringTag]

32 |
33 | // Check the prop type of the entry function

34 | checkFields<Diff<PageProps, FirstArg<TEntry[‘default’]>, ‘default’>>()
| ^
35 |
36 | // Check the arguments and return type of the generateMetadata function
37 | if (‘generateMetadata’ in entry) {
Next.js build worker exited with code: 1 and signal: null

C:\Users\User\builder-app>npx @next/codemod@canary next-async-request-api
Need to install the following packages:
@next/codemod@15.2.0-canary.74
Ok to proceed? (y) y

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated cross-spawn-async@2.2.5: cross-spawn no longer requires a build toolchain, use it instead
Thank you for using @next/codemod!

But before we continue, please stash or commit your git changes.

You may use the --force flag to override this safety check.

C:\Users\User\builder-app>npm run build

builder-app@0.1.0 build
next build

▲ Next.js 15.1.7

• Environments: .env

Creating an optimized production build …
✓ Compiled successfully
Linting and checking validity of types …Failed to compile.

.next/types/app/[…page]/page.ts:34:29
Type error: Type ‘PageProps’ does not satisfy the constraint ‘import(“C:/Users/User/builder-app/.next/types/app/[…page]/page”).PageProps’.
Types of property ‘params’ are incompatible.
Type ‘{ page: string; }’ is missing the following properties from type ‘Promise’: then, catch, finally, [Symbol.toStringTag]

32 |
33 | // Check the prop type of the entry function

34 | checkFields<Diff<PageProps, FirstArg<TEntry[‘default’]>, ‘default’>>()
| ^
35 |
36 | // Check the arguments and return type of the generateMetadata function
37 | if (‘generateMetadata’ in entry) {
Next.js build worker exited with code: 1 and signal: null

C:\Users\User\builder-app>npx @next/codemod@canary next-async-request-api --force
WARNING: Unable to determine if git directory is clean. Forcibly continuing.
√ On which files or directory should the codemods be applied? … C:\Users\User\builder-app.next\types\app[…page]
Executing command: jscodeshift --no-babel --ignore-pattern=/node_modules/ --ignore-pattern=/.next/ --extensions=tsx,ts,jsx,js --transform C:\Users\User\AppData\Local\npm-cache_npx\6a090669e21b4303\node_modules@next\codemod\transforms\next-async-request-api.js C:\Users\User\builder-app.next\types\app[…page]
No files selected, nothing to do.
All done.
Results:
0 errors
0 unmodified
0 skipped
0 ok
Time elapsed: 0.005seconds

C:\Users\User\builder-app>npx @next/codemod@canary next-async-request-api --force
WARNING: Unable to determine if git directory is clean. Forcibly continuing.
√ On which files or directory should the codemods be applied? … .
Executing command: jscodeshift --no-babel --ignore-pattern=/node_modules/ --ignore-pattern=/.next/ --extensions=tsx,ts,jsx,js --transform C:\Users\User\AppData\Local\npm-cache_npx\6a090669e21b4303\node_modules@next\codemod\transforms\next-async-request-api.js .
Processing 10 files…
Spawning 10 workers…
Sending 1 files to free worker…
Sending 1 files to free worker…
Sending 1 files to free worker…
Sending 1 files to free worker…
Sending 1 files to free worker…
Sending 1 files to free worker…
Sending 1 files to free worker…
Sending 1 files to free worker…
Sending 1 files to free worker…
Sending 1 files to free worker…
All done.
Results:
0 errors
9 unmodified
0 skipped
1 ok
Time elapsed: 0.585seconds

C:\Users\User\builder-app>npm run build

builder-app@0.1.0 build
next build

▲ Next.js 15.1.7

• Environments: .env

Creating an optimized production build …
✓ Compiled successfully
Linting and checking validity of types …Failed to compile.

./src/components/builder.tsx:12:1
Type error: Cannot find name ‘builder’.

10 |
11 | // Builder Public API Key set in .env file

12 | builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
| ^
13 |
14 | export function RenderBuilderContent({ content, model }: BuilderPageProps) {
15 | // Call the useIsPreviewing hook to determine if
Next.js build worker exited with code: 1 and signal: null

C:\Users\User\builder-app>npm install builder.io

added 71 packages, and audited 563 packages in 12s

165 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

C:\Users\User\builder-app>npm run build

builder-app@0.1.0 build
next build

▲ Next.js 15.1.7

• Environments: .env

Creating an optimized production build …
✓ Compiled successfully
Linting and checking validity of types …Failed to compile.

./src/components/builder.tsx:12:1
Type error: Cannot find name ‘builder’.

10 |
11 | // Builder Public API Key set in .env file

12 | builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
| ^
13 |
14 | export function RenderBuilderContent({ content, model }: BuilderPageProps) {
15 | // Call the useIsPreviewing hook to determine if
Next.js build worker exited with code: 1 and signal: null

C:\Users\User\builder-app>npm run build

builder-app@0.1.0 build
next build

▲ Next.js 15.1.7

• Environments: .env

Creating an optimized production build …
✓ Compiled successfully

Failed to compile.

./src/components/builder.tsx
5:10 Error: ‘BuilderContent’ is defined but never used. @typescript-eslint/no-unused-vars

info - Need to disable some ESLint rules? Learn more here: Configuration: ESLint | Next.js

C:\Users\User\builder-app>npm run build

builder-app@0.1.0 build
next build

▲ Next.js 15.1.7

• Environments: .env

Creating an optimized production build …
✓ Compiled successfully

Failed to compile.

./src/components/builder.tsx
5:10 Error: ‘BuilderContent’ is defined but never used. @typescript-eslint/no-unused-vars

info - Need to disable some ESLint rules? Learn more here: Configuration: ESLint | Next.js

C:\Users\User\builder-app>npm run build

builder-app@0.1.0 build
next build

▲ Next.js 15.1.7

• Environments: .env

Creating an optimized production build …
✓ Compiled successfully
Linting and checking validity of types …Failed to compile.

./src/components/builder.tsx:12:1
Type error: Cannot find name ‘builder’.

10 |
11 | // Builder Public API Key set in .env file

12 | builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
| ^
13 |
14 | export function RenderBuilderContent({ content, model }: BuilderPageProps) {
15 | // Call the useIsPreviewing hook to determine if
Next.js build worker exited with code: 1 and signal: null

C:\Users\User\builder-app>

[manish-sharma]

Hello @daedalus2,

The issue likely comes from a mismatch in the expected params type in PageProps. Try updating your dynamic route:

import { notFound } from "next/navigation";

export default async function Page({ params }: { params: { page: string } }) {
  if (!params.page) {
    return notFound();
  }

  return <div>Page: {params.page}</div>;
}

If that doesn’t work, delete .next/ and node_modules/, then reinstall dependencies:

rm -rf .next node_modules package-lock.json
npm install
npm run build

To resolve the error "Type error: Cannot find name builder ". Try reinstalling the builder SDK

npm install @builder.io/react

To resolve “Error: ‘BuilderContent’ is defined but never used. @typescript-eslint/no-unused-vars”

Removed unused import from builder.tsx

// Remove this if unused
import { BuilderContent } from "@builder.io/react";

Hope this helps! Let us know if you need any further assistance.

Thanks,

[daedalus2]

Thank you, I went to .next/types/app/[page…]

I put the import function next to the other import function, did not work
I deleted the two import header and added yours, then again error

I added edited file, maybe you can attach a working page.tsx?

editedpage.ts

unedited one:

page.ts

I went to src\components\builder.tsx
put // behind
// import { BuilderContent } from “@builder.io/react”;
// import { BuilderContent, builder } from “@builder.io/sdk”;

npm run build throws same error, deletes the edited page.tsx, and recovers the one without the edit

Reinstalling dependencies did not work either.

./src/components/builder.tsx:13:1
Type error: Cannot find name ‘builder’.

11 |
12 | // Builder Public API Key set in .env file

13 | builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
| ^
14 |
15 | export function RenderBuilderContent({ content, model }: BuilderPageProps) {
16 | // Call the useIsPreviewing hook to determine if
Next.js build worker exited with code: 1 and signal: null

[manish-sharma]

@daedalus2

Can you share the GitHub repo of your project?

[daedalus2]

GitHub - amakuramio/zgfp2 at master cant upload .next files… github throws error

[manish-sharma]

@daedalus2 Remove the next file keeping a backup and then try

[daedalus2]

Hello, I uploaded all files except node_modules. The .next folder is zipped

[daedalus2]

Hello, did you find a solution?

[daedalus2]

Hello. Did you find solution?

[manish-sharma]

Hello @daedalus2,

I’m still working on it, I’ll provide you with an update today.

Thanks,

[manish-sharma]

Hello @daedalus2,

I’ve worked on addressing the reported issues and have provided a Next.js app on GitHub for you to test: GitHub Repository: zgfp2-master-1

To get started:

1. Clone the repository using git cli:

   git clone https://github.com/Manish-Builder-io/zgfp2-master-1
   

2. Rename env.example to .env
3. Run the build process:

   npm run build
   

Please test it out and let us know if everything works as expected.

Publish Quickstart - Builder.io

Git - Downloads

Best regards,

[daedalus2]

Hello, thank you, can you tell me which files you changed?

npm run build generates pages but does not generate these 3 pages I created.
missing home / personal / organization

server/pages shows a 404 and 500 page i dont see the html for the 3 pages I created. also builder has problems connecting
I had to copy .css manually from .next\static\css and add module.exports = {
async redirects() {
return [
{
source: ‘/’,
destination: ‘/about’,
permanent: true,
},
]
},
}
in next.config,js
yet

I created 3 simple pages in builder io (contents) I want them exported but nothing works

[daedalus2]

so im unable to build from app source
but if I delete delete src/pages folder and do Integrate Pages - Builder.io + replace builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
static pages generate but not working (they are static and unclickable. example the modal is not working)
Please help I am really stuck

but if I disable app directory also get this
Unhandled Runtime Error

Hydration failed because the server rendered HTML didn’t match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

• A server/client branch if (typeof window !== 'undefined'). - Variable input such as Date.now() or Math.random() which changes each time it’s called. - Date formatting in a user’s locale which doesn’t match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

See more info here: Text content does not match server-rendered HTML | Next.js

  ...
    <render>
      <Noop>
      <div style={{}} className="builder-bl..." builder-id="builder-d9...">
        <BuilderBlock block={{@type:"@bu...", ...}} index={0} size={undefined} fieldName="blocks" child={undefined} ...>
          <render>
            <Noop>
            <t symbol={{model:"symbol", ...}} attributes={{style:{}, ...}} builderBlock={{@type:"@bu...", ...}} ...>
+             <div
+               data-model="symbol"
+               style={{}}
+               className="builder-block builder-52703e3c13e646ee8ebfe6d017cb1e06 builder-has-component css-196zg9k bu..."
+               builder-id="builder-52703e3c13e646ee8ebfe6d017cb1e06"
+             >

Call Stack9

Hide 9 ignore-listed frames

throwOnHydrationMismatch

node_modules\react-dom\cjs\react-dom-client.development.js (4128:1)

beginWork

node_modules\react-dom\cjs\react-dom-client.development.js (9929:1)

runWithFiberInDEV

node_modules\react-dom\cjs\react-dom-client.development.js (543:1)

performUnitOfWork

node_modules\react-dom\cjs\react-dom-client.development.js (15044:1)

workLoopSync

node_modules\react-dom\cjs\react-dom-client.development.js (14870:39)

renderRootSync

node_modules\react-dom\cjs\react-dom-client.development.js (14850:1)

performWorkOnRoot

node_modules\react-dom\cjs\react-dom-client.development.js (14334:1)

performWorkOnRootViaSchedulerTask

node_modules\react-dom\cjs\react-dom-client.development.js (15931:1)

MessagePort.performWorkUntilDeadline

node_modules\scheduler\cjs\scheduler.development.js (44:1)

Was this helpful?

1

2

1/1

Next.js 15.2.0

[manish-sharma]

It’s great to see that! Were you able to generate the build files?

[daedalus2]

Hello Manish, I have to delete /app in src and make /pages directory, but the problem is these are static html, without modals or buttons
also I cannot edit these in builder app , throws error

no pages

[manish-sharma]

Hello @daedalus2,

Could you clarify what you’re trying to achieve? Are you saying that the Next.js build files don’t contain the static page content?

Looking forward to your response.

Best,

[daedalus2]

Hello Manish, thank you for your reply, I built 3 pages in builder.io, using /app I only get .js files, no pages, I want functional pages that I can upload to netlify, for example.
when I delete /app and makes /pages folder with the instructions provided by builder.io, I get the 3 html pages, but the modals inside do not work, and I cannot open these sites to edit in builder.io

src/pages/[…page].tsx

// pages/[...page].tsx
import React from "react";
import { useRouter } from "next/router";
import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react";
import { BuilderContent } from "@builder.io/sdk";
import DefaultErrorPage from "next/error";
import Head from "next/head";
import { GetStaticProps } from "next";

// Replace with your Public API Key
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);

// Define a function that fetches the Builder
// content for a given page
export const getStaticProps: GetStaticProps = async ({ params }) => {
  // Fetch the builder content for the given page
  const page = await builder
    .get("page", {
      userAttributes: {
        urlPath: "/" + ((params?.page as string[])?.join("/") || ""),
      },
    })
    .toPromise();

  // Return the page content as props
  return {
    props: {
      page: page || null,
    },
    // Revalidate the content every 5 seconds
    revalidate: 5,
  };
};

// Define a function that generates the
// static paths for all pages in Builder
export async function getStaticPaths() {
  // Get a list of all pages in Builder
  const pages = await builder.getAll("page", {
    // We only need the URL field
    fields: "data.url",
    options: { noTargeting: true },
  });

  // Generate the static paths for all pages in Builder
  return {
    paths: pages.map((page) => `${page.data?.url}`).filter(url => url !== '/'),
    fallback: 'blocking',
  };
}

// Define the Page component
export default function Page({ page }: { page: BuilderContent | null }) {
  const router = useRouter();
  const isPreviewing = useIsPreviewing();

  // If the page content is not available
  // and not in preview mode, show a 404 error page
  if (!page && !isPreviewing) {
    return <DefaultErrorPage statusCode={404} />;
  }

  // If the page content is available, render
  // the BuilderComponent with the page content
  return (
    <>
      <Head>
        <title>{page?.data?.title}</title>
      </Head>
      {/* Render the Builder page */}
      <BuilderComponent model="page" content={page || undefined} />
    </>
  );
}

[manish-sharma]

Hello @daedalus2,

Please note the NextJS app router and pages router works differently

• When using /app, Next.js 13+ (App Router) compiles everything into server and client components, resulting in .js files instead of static .html pages.
• When switching to /pages (Pages Router), you get the expected static HTML pages, but modals inside do not work.

Since Netlify works best with static pages, you should use Static Site Generation (SSG). Your /pages/[...page].tsx is mostly correct for this.

However, make sure you’re building your Next.js project with the Pages Router (/pages folder). The App Router (/app) does not output .html files the way Netlify expects.

Run the following to generate static pages:

next build && next export

This will create an out/ folder with .html files, which can be deployed to Netlify.

Thanks,

[daedalus2]

Hello Manish, your command gives error:

   ▲ Next.js 15.2.0
   - Environments: .env

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useContext')
    at t.useContext (C:\Users\User\zgfp2\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:124:6206)
    at R (C:\Users\User\zgfp2\.next\server\chunks\121.js:2:89034)
    at nL (C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:76:46773)
    at nU (C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:76:48548)
    at nU (C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:76:64360)
    at nq (C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:76:67434)
    at nH (C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:76:65009)
    at nG (C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:76:70865)
    at nU (C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:76:60898)
    at nq (C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:76:67434)
Export encountered an error on /_not-found/page: /_not-found, exiting the build.
 ⨯ Next.js build worker exited with code: 1 and signal: null

pages router gives me html pages without modals, I need modals. so where to host these js files? how to open them to see my 3 pages?

so frustrated, npm run build works but unusable pages next build throws error

[manish-sharma]

Hi @daedalus2,

Since Netlify is optimized for static sites, deploying your Next.js App Router project depends on whether you want Static Generation (faster but requires redeployment on content updates) or Server-Side Rendering (SSR) (dynamic updates but slightly slower).

---

1. Static Export (next export)

1.1 Configure next.config.js for Static Export

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export", // Enables static export
  images: {
    unoptimized: true, // Netlify doesn't support Next.js Image Optimization
  },
};

module.exports = nextConfig;

1.2 Pre-Generate Pages at Build Time (app/[...page]/page.tsx)

import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "../../components/builder";

builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);

interface PageProps {
  params: Promise<{
    page: string[];
  }>;
}

// Pre-fetch all Builder.io pages at build time
export async function generateStaticParams() {
  const pages = await builder.getAll("page", {
    fields: "data.url",
    options: { noTargeting: true },
  });

  return pages.map((page) => ({
    page: page.data?.url?.replace(/^\//, "").split("/") || [],
  }));
}

// Fetch Builder.io content
async function getPageContent(urlPath: string) {
  const content = await builder
    .get("page", {
      userAttributes: { urlPath },
    })
    .toPromise();
  return content;
}

export default async function Page(props: PageProps) {
  const builderModelName = "page";

  const content = await builder
    // Get the page content from Builder with the specified options
    .get(builderModelName, {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: "/" + ((await props?.params)?.page?.join("/") || ""),
      },
    })
    // Convert the result to a promise
    .toPromise();

  return (
    <>
      {/* Render the Builder page */}
      <RenderBuilderContent content={content} model={builderModelName} />
    </>
  );
}

1.3 Build & Deploy

Run:

npm run build && next export

Then deploy via Netlify CLI:

netlify deploy --prod --dir=out

Or, push to GitHub and set Netlify’s publish directory to out/.

Example Repo with updated code to generate static files:

GitHub - Manish-Builder-io/zgfp2-master-1

---

2. Server-Side Rendering (SSR) with Netlify

2.1 Install Netlify Plugin

npm install @netlify/plugin-nextjs

Then, update netlify.toml:

[build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

2.2 Modify app/[...page]/page.tsx for SSR

import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "../../components/builder";

builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);

async function getPageContent(urlPath: string) {
  return builder.get("page", { userAttributes: { urlPath } }).toPromise();
}

export default async function Page({ params }: { params: { page: string[] } }) {
  const urlPath = "/" + (params?.page?.join("/") || "");
  const content = await getPageContent(urlPath);

  return content ? <RenderBuilderContent content={content} model="page" /> : <div>Page Not Found</div>;
}

---

Let me know if you need further clarification!

Thanks,