After upgrading to angular 15 sitecore experience editor is throwing error: ES Modules may not assign module.exports or exports

Question

We have recently upgraded to Angular 15 for Sitecore. Everything works fine except for the Experience Editor. We are getting the following. I am suspicious that Sitecore is not fully ready for Angular 15? Thanks in advance.

Error Rendering Sitecore.JavaScriptServices.ViewEngine.Presentation.JsLayoutRenderer: ES Modules may not assign module.exports or exports.*, 
   Use ESM export syntax, instead: 99534 Error: ES Modules may not assign module.exports or exports.*, 
   Use ESM export syntax, instead: 99534 
      at Object.set [as exports] (C:\inetpub\wwwroot\dist\EmployerAdminPortal\server.bundle.js:14:6392553) 
      at 99534 (C:\inetpub\wwwroot\dist\EmployerAdminPortal\server.bundle.js:14:2878721) 
      at __webpack_require__ (C:\inetpub\wwwroot\dist\EmployerAdminPortal\server.bundle.js:14:6391825) 
      at C:\inetpub\wwwroot\dist\EmployerAdminPortal\server.bundle.js:14:6393006 
      at Object. (C:\inetpub\wwwroot\dist\EmployerAdminPortal\server.bundle.js:14:6393258) 
      at Module._compile (node:internal/modules/cjs/loader:1159:14) 
      at Module._extensions..js (node:internal/modules/cjs/loader:1213:10) 
      at Module.load (node:internal/modules/cjs/loader:1037:32) 
      at Module._load (node:internal/modules/cjs/loader:878:12) 
      at Module.require (node:internal/modules/cjs/loader:1061:19)
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.HostingModels.Http.HttpNodeInstance.InvokeExport[T](NodeInvocationInfo invocationInfo)
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.HostingModels.OutOfProcessNodeInstance.InvokeExport[T](String moduleName, String exportNameOrNull, Object[] args)
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.DefaultNodeServices.InvokeExportWithPossibleRetry[T](String moduleName, String exportedFunctionName, Object[] args, Boolean allowRetry)
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.DefaultNodeServices.InvokeExport[T](String moduleName, String exportedFunctionName, Object[] args)
   at Sitecore.JavaScriptServices.ViewEngine.Node.NodeRenderEngine.Invoke[T](String moduleName, String functionName, Object[] functionArgs)
   at Sitecore.JavaScriptServices.ViewEngine.Presentation.JssRenderer.PerformRender(TextWriter writer, IRenderEngine renderEngine, String moduleName, String functionName, Object[] functionArgs)
   at Sitecore.JavaScriptServices.ViewEngine.Presentation.JssRenderer.Render(TextWriter writer)
   at Sitecore.Mvc.Pipelines.Response.RenderRendering.ExecuteRenderer.Render(Renderer renderer, TextWriter writer, RenderRenderingArgs args)

Answer 1

You need to be on at least JSS v21.3.0, this was when Angular 15 support was added:

https://github.com/Sitecore/jss/blob/v21.3.0/packages/sitecore-jss-angular/package.json

For that, you would also need to make sure your XP/XM instance is at least 10.3.0 based on the compatibility table: https://support.sitecore.com/kb?id=kb_article_view&sysparm_article=KB1000576

Answer 2

For clarity, this error message indicates a mismatch in module export syntax between ES Modules (ESM) and CommonJS. Specifically, there is an attempt to use CommonJS module export syntax within an ES module.

First I would ask how the Angular upgrade was decided on prior to checking JSS compatibility. When it comes to Sitecore compatibility, it's almost always better to start with JSS as the basis for version compatibility and then go from there, rather than treating your custom code as the basis for version compatibility and trying to make it work with incompatible versions of JSS (trying to be the "tail that wags the dog").

Aside from @Richard Seal's answer to upgrade your version of JSS, some other (ostensibly less desirable) options are:

• Downgrade back to Angular 12
• Fiddle with your webpack configuration to handle ESM
• Inspect the changes in the sitecore-jss-angular lib that Richard linked to and selectively add support for Angular 15 wherever necessary

Answer 3

The problem was in the Sitecore server.bundle.ts file. In previous versions of Angular there was:

module.exports = {...}

In the new version, now it's just:

export {...}

-Judson