Cannot Find Module
nathanaelphilip opened this issue · comments
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:
- Install NextJS 12 Project
- Install @square/web-sdk
- Try to import
{ payments }
- See error
Expected behavior
I would like to be able to use this package to build the Payment Forms and Buttons
Desktop (please complete the following information):
- OS: MacOS
- Browser Safari
- Version 15.1
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!
@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!