Nextjs 14 square payment sdk 'Module not found: Can't resolve 'react-server-dom-webpack/client'

[rhtaylor]

I have a nextjs app that works perfectly.

It uses the latest Nextjs version and tailwindcss.

After adding square payments sdk and a server file for the api I got the error:

" ⨯ ./node_modules/next/dist/build/webpack/loaders/next-flight-loader/action-client-wrapper.js:19:64
Module not found: Can't resolve 'react-server-dom-webpack/client''

Import trace for requested module:
./pages/actions/actions.js
Watchpack Error (watcher): Error: ENOTDIR: not a directory, watch '/usr/bin/node/https://github.com/vercel'
Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir '/usr/bin/node/https://github.com/vercel'
Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir '/usr/bin/node'
POST /actions/actions 500 in 3086ms
[webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, lstat '/home/web_dev/next-kennels-app/node_modules/react-square-web-payments-sdk/dist/node_modules/@square/web-sdk/package.json'
⨯ ./node_modules/next/dist/build/webpack/loaders/next-flight-loader/action-client-wrapper.js:19:64
Module not found: Can't resolve 'react-server-dom-webpack/client'"

Initially I used this for documentation: https://developer.squareup.com/blog/accept-payments-with-square-using-next-js-app-router/#nextjs-14-server-actions

Then updated it to use https://developer.squareup.com/blog/online-payments-with-square-and-react/

So it would not import a server function into the client side.

Both ways will throw the same above error. Either at load or upon API request.

In a test nextjs app this is not an issue. I created a blank test run next app and there were no error. It is only an issue when I added the square sdk to my existing app.

Originally I was using next 14.0.2
I upgraded to 14.2.3 to mirror the square documentation.

API folder/file action/action

"use server"; 

import { Client } from "square";
import * as cryptoServer from "crypto";
function getRandomUUID(){

    if (typeof window === "undefined"){
        return cryptoServer.randomBytes(16).toString('hex')
    }
    return crypto.randomUUID();
}


import {uuid} from 'uuidv4'
BigInt.prototype.toJSON = function () {
    return this.toString();
  };

const PUBLIC_TOKEN = process.env.NEXT_PUBLIC_Access_token


const {paymentsApi} = new Client({
    accessToken: PUBLIC_TOKEN,
    environment: "sandbox",

});

export default async function submitPayment(req, res) {
    console.log("REQ", req)
    if (req.method === "POST"){
      const {result} = await paymentsApi.createPayment({
        idempotencyKey: getRandomUUID(),
        sourceId,
        amountMoney: {
          currency: "USD",
          amount: 100,},

      });
      console.log(result)
      res.status(200).json(result);

    } else {
      return res.status(500).send();
    }
  }

Client file

"use client" 

<PaymentForm
                        applicationId={ APP_ID }
                        locationId={LOCAL_ID}
                        cardTokenizeResponseReceived={async (token, buyer) => {
                            const response = await fetch("/actions/actions", {
                                method: "POST",
                                headers: {
                                  "Content-type": "application/json",
                                },
                                body: JSON.stringify({
                                  sourceId: token.token,
                                }),
                              });
                              console.log(await response.json());
                          }
                        }  
                       
                      >
                        <CreditCard buttonProps={{
                            css: {
                                 backgroundColor: "#771520",
                                 fontSize: "14px",
                                 color: "#fff",
                                 "&:hover": {
                                   backgroundColor: "#530f16",
                                 },
                               },  }}/>
                              
                     </PaymentForm>

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = { webpack5: false,   reactStrictMode: true,
  experimental: {
    serverActions: true,
  }, };

module.exports = nextConfig;

package.json

{
  "name": "learn-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3000",
    "build": "next build && next-sitemap --config next-sitemap.config.js",
    "start": "next start -p 3000",
    "generate": "next build && next export",
    "export": "next build && next export",
    "postbuild": "next-sitemap",
    "test": "jest"
  },
  "dependencies": {
    "@emailjs/browser": "^3.11.0",
    "@square/web-sdk": "^2.0.1",
    "autoprefixer": "^10.1.0",
    "eslint-config-next": "^14.2.3",
    "gray-matter": "^4.0.3",
    "lodash": "^4.17.20",
    "next": "^14.2.3",
    "next-image-export-optimizer": "^1.11.0",
    "next-sitemap": "^4.2.3",
    "next-transpile-modules": "^10.0.1",
    "postcss": "^8.4.32",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^8.5.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-responsive-carousel": "^3.2.10",
    "react-square-web-payments-sdk": "^3.2.1",
    "smoothscroll-polyfill": "^0.4.4",
    "square": "^37.0.0",
    "tailwindcss": "^3.4.3",
    "uuidv4": "^6.2.13"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^14.2.1",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "next-router-mock": "^0.9.12"
  }
}

I've seen a few people with this same issue so I think it would be good for the community to solve it.