Uncaught ReferenceError: require is not defined while integrating VSS.SDK.min.js with SystemJS

I am getting below errors while integrating VSS.SDK.min.js with SystemJS

Uncaught ReferenceError: require is not defined
    at <anonymous>:1:1
    at w (VSS.SDK.min.js:2)
    at p (VSS.SDK.min.js:2)

Uncaught TypeError: window.require is not a function
    at rt (VSS.SDK.min.js:2)
    at Object.bt [as require] (VSS.SDK.min.js:2)
    at index.html:53

below are the scripts, I have included in my index.html

   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

   <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/5.5.0/system/single-spa.min.js" as="script" crossorigin="anonymous" />
   <script src='https://unpkg.com/core-js-bundle@3.1.4/minified.js'></script>
   <script src="https://unpkg.com/zone.js@0.10.3/dist/zone.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.8.3/system.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.8.3/extras/amd.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-exports.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-register.min.js"></script>
   <script src="lib/VSS.SDK.min.js"></script>

Here I don’t see this error when I remove amd.min.js

code

VSS.init({
          explicitNotifyLoaded: true,
          usePlatformScripts: true
      });
      VSS.ready(function () {
        VSS.require(["VSS/Authentication/Services"], function (VSS_Auth_Service) {
        });
        VSS.notifyLoadSucceeded();
      });

I tried resolving it by adding below code to amd.js as you suggested by @joeldenning, but that did not resolve the issue. https://github.com/systemjs/systemjs/issues/1990

function require(id) {
  return System.get(System.resolve(id))
}

[joeldenning]

You didn’t answer my questions above trying to help diagnose the issue. If you do, I can try to help you diagnose further.

Is VSS.SDK on npm?

Oftentimes code on npm is published in UMD format, which allows us to avoid calling require() because it calls define() instead.

The UMD format question is important, but you didn’t look at the code to check it. Looking at the code you shared, it calls window.require() unless hostPageContext.diagnostics.bundlingEnabled is truthy. window.require() is not defined in systemjs environments.

I’m closing this since it’s not a bug with SystemJS. I can’t spend time helping fix your exact setup. Feel free to reopen with a demonstration of a problem with SystemJS, or feel free to comment with further questions about how SystemJS works.

[ashok-damani]

Hi @joeldenning I have written code in github issue template on the same link you have given, but that won’t work, as the VSS.SDK only works in azure dev ops environment. Please suggest any other way around?