Module Not Found in Next.js - AMD module issue and relative paths.

[ahbyass]

Next.js tries to load the import as AMD, due to relative path resolution in Webpack to get this library to work you need to add the following to next.config.mjs.

const nextConfig = {
  webpack: (config, { isServer }) => {
    config.module.rules.push({
      test: /\.js$/, // Apply this rule to .js files
      include: /node_modules\/cybersource-rest-client/,
      parser: {
        amd: false, // Disable AMD parsing
      },
    });

    return config;
  },
};

[niraj-at-travelopia]

Thanks for sharing, I am getting a new error:

Error: ENOENT: no such file or directory, open 'XXX/project/.next/server/vendor-chunks/bridge.js'

[SharperImage]

For some reason this didn't work for me. I also tried to use this property which didn't work at all: https://webpack.js.org/configuration/other-options/#amd. Anyone have ideas on how to fix this with Webpack 5?

[SharperImage]

For now I just changed the condition in the cybersource-rest-client package code to never build with AMD enabled, and I'm using patch-package to persist the change, while I wait for Webpack to explain how to use the new amd property, or some other alternative.

[TGihan]

Please provide complete samples to the repository with react or nextjs. There is no any complete sample(demo app) for react or nextjs with cybersource on the internet. Its a huge issue when integrating cybersource to newest web technologies. Most of the users need payment link and recurring billing for their projects. Please create demo react or nextjs app by including above scenarios. I also got this issue module not found when integratiing with nextjs.