Build Fail - Can't resolve 'react-server-dom-webpack/client'

### Problem Description Hello, I'm getting an error when running `npm run build` using ZSA and Next.js version `^14.2.18`. Any help would be greatly appreciated! 😊 I created a server action via ZSA best practices and imported it into a client component. The app runs fine in dev (watch) mode, but it doesn't build. --- ### **Build Error Logs** ```text Failed to compile. ./node_modules/next/dist/build/webpack/loaders/next-flight-loader/action-client-wrapper.js Module not found: Can't resolve 'react-server-dom-webpack/client' https://nextjs.org/docs/messages/module-not-found Import trace for requested module: ./src/lib/zsa/comment/comment-server-actions.ts ./src/pages/dashboard/create/create-report-comment-page.tsx ./node_modules/next/dist/client/components/router-reducer/fetch-server-response.js Module not found: Can't resolve 'react-server-dom-webpack/client' https://nextjs.org/docs/messages/module-not-found Import trace for requested module: ./node_modules/next/dist/client/components/router-reducer/prefetch-cache-utils.js ./node_modules/next/dist/client/components/router-reducer/create-initial-router-state.js ./node_modules/next/dist/client/components/app-router.js ./node_modules/next/dist/client/app-call-server.js ./node_modules/next/dist/build/webpack/loaders/next-flight-loader/action-client-wrapper.js ./src/lib/zsa/comment/comment-server-actions.ts ./src/pages/dashboard/create/create-report-comment-page.tsx ./node_modules/next/dist/client/components/router-reducer/reducers/server-action-reducer.js Module not found: Can't resolve 'react-server-dom-webpack/client' https://nextjs.org/docs/messages/module-not-found Import trace for requested module: ./node_modules/next/dist/client/components/router-reducer/router-reducer.js ./node_modules/next/dist/shared/lib/router/action-queue.js ./node_modules/next/dist/client/components/use-reducer-with-devtools.js ./node_modules/next/dist/client/components/app-router.js ./node_modules/next/dist/client/app-call-server.js ./node_modules/next/dist/build/webpack/loaders/next-flight-loader/action-client-wrapper.js ./src/lib/zsa/comment/comment-server-actions.ts ./src/pages/dashboard/create/create-report-comment-page.tsx ``` --- ### **Dependencies** ```json "dependencies": { "@auth/pg-adapter": "^1.7.3", "@hookform/resolvers": "^3.9.1", "@radix-ui/react-avatar": "^1.1.1", "@radix-ui/react-collapsible": "^1.1.1", "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-popover": "^1.1.2", "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slider": "^1.2.1", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.4", "@tanstack/react-table": "^8.20.5", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cmdk": "^1.0.0", "date-fns": "^4.1.0", "jsonwebtoken": "^9.0.2", "lodash": "^4.17.21", "lucide-react": "^0.456.0", "next": "^14.2.18", "next-auth": "^5.0.0-beta.25", "next-themes": "^0.4.3", "nodemailer": "^6.9.16", "pg": "^8.13.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook": "^0.0.1", "react-hook-form": "^7.53.2", "react-icons": "^5.3.0", "tailwind-merge": "^2.5.4", "tailwindcss-animate": "^1.0.7", "zod": "^3.23.8", "zsa": "^0.6.0", "zsa-react": "^0.2.2" }, "devDependencies": { "@types/jsonwebtoken": "^9.0.7", "@types/lodash": "^4.17.13", "@types/node": "^20", "@types/nodemailer": "^6.4.16", "@types/pg": "^8.11.10", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.18", "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "^5" } ``` --- ### **create-report-comment-page.tsx** ```tsx "use client"; import PageWrapper from "@/src/components/layout/page-wrapper"; import React from "react"; import ReportCommentForm, { ReportCommentFormData, } from "@/src/components/dashboard/report-comment/create/form/form"; import { saveComment } from "@/src/lib/zsa/comment/comment-server-actions"; import { UUID } from "crypto"; type CreateReportCommentPageProps = { commentTemplateId?: UUID; }; const CreateReportCommentPage: React.FC<CreateReportCommentPageProps> = ({ commentTemplateId, }) => { console.log(commentTemplateId); const onSubmit = async (data: ReportCommentFormData) => { try { await saveComment(data); console.log("Collected Data:", data); } catch (err) { if (err instanceof Error) console.error(`Could not create comment: ${err.message}`); } }; return ( <section className="py-2"> <PageWrapper> <ReportCommentForm onSubmit={onSubmit} /> </PageWrapper> </section> ); }; export default CreateReportCommentPage; ``` ### **comment-server-actions.ts** ```ts "use server"; import { createServerActionProcedure } from "zsa"; import { pool } from "@/src/lib/pg/postgres"; import { validateSessionAndUserId } from "@/src/lib/auth/auth-utils"; import { commentTemplateSchema } from "@/src/lib/schemas/comment-schemas"; const authedProcedure = createServerActionProcedure() .handler(async () => { try { const { session, userId } = await validateSessionAndUserId(); return { session, userId }; } catch (err) { throw `User is not authenticated: ${err}`; } }) .createServerAction(); export const saveComment = authedProcedure .input(commentTemplateSchema) .handler(async ({ input, ctx }) => { const client = await pool.connect(); const { userId } = ctx; const { name, lengthOfCombination, comment } = input; try { await client.query("BEGIN"); const templateResult = await client.query( "INSERT INTO comment_templates (user_id, name, length_of_combination) VALUES ($1, $2, $3) RETURNING id", [userId, name, parseInt(lengthOfCombination)] ); if (!templateResult.rows || templateResult.rows.length === 0) { throw new Error("Failed to insert into comment_templates"); } const commentTemplateId = templateResult.rows[0]?.id; if (!commentTemplateId) { throw new Error("comment_template ID is missing after insert"); } for (const section of comment) { const index = parseInt(section.chosenByCombinationIndex); if (isNaN(index)) { throw new Error( `Invalid chosenByCombinationIndex: ${section.chosenByCombinationIndex}` ); } const sectionResult = await client.query( `INSERT INTO comment_template_sections (comment_template_id, chosen_by_combination_index) VALUES ($1, $2) RETURNING id`, [commentTemplateId, index] ); if (!sectionResult.rows || sectionResult.rows.length === 0) { throw new Error( `Failed to insert section for combinationIndex: ${index}` ); } const sectionId = sectionResult.rows[0]?.id; if (!sectionId) { throw new Error("Section ID is missing after insert"); } for (const [grade, text] of Object.entries(section.grades)) { if (!grade || !text) { throw new Error( `Invalid grade or text: grade=${grade}, text=${text}` ); } const gradeResult = await client.query( `INSERT INTO comment_template_section_grades (comment_template_section_id, grade, text) VALUES ($1, $2, $3) RETURNING id`, [sectionId, grade, text] ); if (!gradeResult.rows || gradeResult.rows.length === 0) { throw new Error( `Failed to insert grade for sectionId: ${sectionId}, grade: ${grade}` ); } } } await client.query("COMMIT"); } catch (err) { await client.query("ROLLBACK"); if (err instanceof Error) { console.error("Error saving comment template:", err.message); throw new Error(`Save comment failed: ${err.message}`); } } finally { client.release(); } }); ```