Cannot Find Module

[nathanaelphilip]

Describe the bug
Installed the latest version ^2.0.0 installed via Node 16.7.0 in a NextJS project and get this error when importing:

Import statement:
import { payments } from "@square/web-sdk";

Error:

Error: Cannot find module '/Volumes/Neue/Developer/Sites/thecuriousfoxco-v2/node_modules/@square/web-sdk/dist/payments' imported from /Volumes/Neue/Developer/Sites/thecuriousfoxco-v2/node_modules/@square/web-sdk/dist/index.js

To Reproduce
Steps to reproduce the behavior:

1. Install NextJS 12 Project
2. Install @square/web-sdk
3. Try to import { payments }
4. See error

Expected behavior
I would like to be able to use this package to build the Payment Forms and Buttons

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser Safari
• Version 15.1

[maxbeatty]

I have a project using Next v11 and used next-transpile-module with this configuration to account for @square/web-sdk being ESM. I'm not sure if Next v12 handles it differently.

// next.config.js
const withTM = require('next-transpile-modules')(['@square/web-sdk']);

module.exports = withTM({
  // more config
})

Our usage is almost identical to what you posted:

import { payments } from '@square/web-sdk';
import type { Payments } from '@square/web-sdk';
import { useEffect, useState } from 'react';

type MaybeError = Error | undefined;
type MaybePayments = Payments | undefined;

interface SqPaymentsState {
  error: MaybeError;
  payments: MaybePayments;
}

export function useSqPayments(): SqPaymentsState {
  const [error, setError] = useState<MaybeError>();
  const [paymentsInstance, setPayments] = useState<MaybePayments>();

  useEffect(() => {
    async function load(): Promise<void> {
      try {
        const p = await payments(applicationId, locationId, overrides);

        if (p === null) {
          throw new Error('Square Payments failed to load');
        }

        setPayments(p as Payments);
      } catch (error_: unknown) {
        setError(error_ as Error);
      }
    }

    load();
  }, [setPayments, setError]);

  return { error, payments: paymentsInstance };
}

Hope this helps!

[nathanaelphilip]

@maxbeatty that worked! thank you for sharing :). I thought Next12 was supposed to handle that natively, but maybe this is a different issue: https://nextjs.org/blog/next-11-1#es-modules-support

Thanks again!