Good morning! I’m currently building out an integration of React Square Web Payments SDK with NextJS. I’m getting a config error when running npm run dev coming from next.config.js and can’t figure out what’s causing it. I need an extra set of eyes to spot what I’m missing.
/** @type {import('next').NextConfig} */
const withTM = require('next-transpile-modules')(['@square/web-sdk', 'react-square-web-payments-sdk'])
module.exports = withTM({
reactStrictMode: true,
experimental: {
esmExternals: 'loose'
}
})
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - Failed to load next.config.js, see more info here next-config-error | Next.js
Error: next-transpile-modules - an unexpected error happened when trying to resolve “@square/web-sdk”. Are you sure the name of the module you are trying to transpile is correct, and it has a package.json with a “main” or an “exports” field?
Error: Can’t resolve ‘@square/web-sdk/package.json’ in ‘/Users/bakarisoul/squareDemo/next-webpay-afterpay’
at getPackageRootDirectory (/Users/bakarisoul/squareDemo/next-webpay-afterpay/node_modules/next-transpile-modules/src/next-transpile-modules.js:118:15)
at Array.map ()
at withTM (/Users/bakarisoul/squareDemo/next-webpay-afterpay/node_modules/next-transpile-modules/src/next-transpile-modules.js:127:34)
at Object. (/Users/bakarisoul/squareDemo/next-webpay-afterpay/next.config.js:4:18)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions…js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at ModuleWrap. (node:internal/modules/esm/translators:190:29)
at ModuleJob.run (node:internal/modules/esm/module_job:185:25)