Must use import to load ES Module: swiper.esm.js

[mectors]

Platform

• JavaScript

Author or host

Yes

Version of SDK

"adaptive-expressions": "^4.19.1",
"adaptivecards": "^2.11.2",
"adaptivecards-templating": "^2.3.1",
"swiper": "^9.0.5"

Issue

I am trying for adaptivecards templates to work consistently and I get really strange issues with some cards. So I just tried to make a very simple js script to test different templates with data. Unfortunately I get problems with carousel.js trying to use swiper which for some reason I had to add manually.

internal/process/esm_loader.js:74 internalBinding('errors').triggerUncaughtException( ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: = ./adaptivetemplating/node_modules/swiper/swiper.esm.js require() of ES modules is not supported. require() of ./adaptivetemplating/node_modules/swiper/swiper.esm.js from ./adaptivetemplating/node_modules/adaptivecards/lib/carousel.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename swiper.esm.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from ./adaptivetemplating/node_modules/swiper/package.json.

at new NodeError (internal/errors.js:322:7)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1131:13)
at Module.load (internal/modules/cjs/loader.js:979:32)
at Function.Module._load (internal/modules/cjs/loader.js:819:12)
at Module.require (internal/modules/cjs/loader.js:1003:19)
at require (internal/modules/cjs/helpers.js:107:18)
at Object.<anonymous> (./adaptivetemplating/node_modules/adaptivecards/lib/carousel.js:42:16)
at Module._compile (internal/modules/cjs/loader.js:1114:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
at Module.load (internal/modules/cjs/loader.js:979:32) {

code: 'ERR_REQUIRE_ESM' }

The code is simple and although not fully tested always gives the swiper error: import * as ACData from "adaptivecards-templating"; import * as Adaptive from "adaptivecards"; var fs = require("fs");

console.log("template:",process.argv[2]) console.log("data:",process.argv[3])

const cardtemplate = fs.readFileSync(process.argv[2]); const carddata = fs.readFileSync(process.argv[3]);

var adaptiveCard = new Adaptive.AdaptiveCard(); var template = new ACData.Template(cardtemplate); console.log("ctemplate:",template) var context = { } context.$root = JSON.parse(carddata); var cardPayload = template.expand(context); console.log("card2:",cardPayload) adaptiveCard.parse(cardPayload); console.log(adaptiveCard.render());

A general comment on the actual usage of Adaptive Cards Templates [which I got working in a browser but not consistently takes all example files] is the var context: ACData.IEvaluationContext = { $root = { "name": "Adaptive Cards" } }; where ACData.IEvaluationContext is not easy to get to work on javascript / nodejs / typescript. It would be easier to have a ACData.Context(somejson)?

[MUCZ]

I have the exact same problem :(

I only found a workaround: try use "adaptivecards": "2.11.1" instead of ^2.11.1(which will lead to 2.11.2, which a version that contains the bug you said)

[proxy-hatch]

+1 also encountered this issue. Thanks for the workaround.

[meta-dipanshu-sharma]

I'm facing a similar issue while running jest unit tests when using "adaptivecards": 2.11.2 version. Error is:

/node_modules/swiper/swiper.esm.js:13
    export { default as Swiper, default } from './core/core.js';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/adaptivecards/src/carousel.ts:26:1)

It works when we downgrades the version to 2.11.1 as suggested above but is there any fix coming up for latest version? Or is there any code workaround we can do while using latest?

[meta-dipanshu-sharma]

@jwoo-msft any updates on this?

[Neeraj-swarnkar]

@jwoo-msft @anna-dingler, @proxy-hatch @MUCZ I was also getting similar error while running jest unit tests when using "adaptivecards": 2.11.2 version. So I have degraded and using below versions, and jest seems to work fine, But I am noticing issues with drag and drop feature. Getting below attached error, do we have any solution for that.

    "adaptive-expressions": "4.19.3",
    "adaptivecards": "2.11.1",
    "adaptivecards-designer": "2.4.3",
    "adaptivecards-templating": "2.3.1",

These versions are compatible ? When we have downgraded the adaptivecards version, should we downgrade the versions for other packages as well. Please confirm. Thanks..

[Neeraj-swarnkar]

@jwoo-msft @anna-dingler, @proxy-hatch @MUCZ I was also getting similar error while running jest unit tests when using "adaptivecards": 2.11.2 version. So I have degraded and using below versions, and jest seems to work fine, But I am noticing issues with drag and drop feature. Getting below attached error, do we have any solution for that.

    "adaptive-expressions": "4.19.3",
    "adaptivecards": "2.11.1",
    "adaptivecards-designer": "2.4.3",
    "adaptivecards-templating": "2.3.1",

These versions are compatible ? When we have downgraded the adaptivecards version, should we downgrade the versions for other packages as well. Please confirm. Thanks..

@anna-dingler, @jwoo-msft Could you please suggest something.. Thanks..

[anna-dingler]

Hi @Neeraj-swarnkar,

I don't have a direct solution to this problem. The issue stems from swiper because it is an ES module. I created an issue related to this for our unit test project that includes some resources: https://github.com/microsoft/AdaptiveCards/issues/7983

I believe there should be some options for configuring your project to allow ES modules. Downgrading swiper to version 6 would also solve this.

I will speak with @jwoo-msft about bandwidth for this issue - thanks!

[Neeraj-swarnkar]

Hi @Neeraj-swarnkar,

I don't have a direct solution to this problem. The issue stems from swiper because it is an ES module. I created an issue related to this for our unit test project that includes some resources: #7983

I believe there should be some options for configuring your project to allow ES modules. Downgrading swiper to version 6 would also solve this.

I will speak with @jwoo-msft about bandwidth for this issue - thanks!

Thanks @anna-dingler, UT issue is not coming with the swiper version 6.8.1.

[jwoo-msft]

The Swiper module we are currently dependent on only supports ESM (ECMAScript modules). To address this issue, you'll need to update your environment and source code to accommodate ESM modules.

This will be the quickest solution to the problem at hand. Meanwhile, we are working on an alternate resolution for developers who aren't yet able to utilize ESM. We plan to internally integrate Swiper into the AdaptiveCards and implement tree shaking.

As a result, developers will no longer need to directly depend on Swiper. However, this process will take some time. Therefore, we strongly recommend updating your environment and source code to support ESM in the interim.

[Katli95]

Unfortunately that's not really a viable solution for everyone. For my use-case I'm only using the library for card-generation, and with this development I'm leaning more towards abandoning the library entirely and making a proprietary JSON generation utility 😶

Will stay subscribed in the hopes for some pivot from this stance..

[domix1996]

any news?

[hughyyyy]

Hey @jwoo-msft, @anna-dingler Any news on this?

[jwoo-msft]

let me check with our team

[JoA-MoS]

I believe the core of the problem is how the library is being packaged as a commonjs package via webpack that is referencing swiper using require. You can look at the published library built output at node_modules/adaptivecards/lib/carousel.js

var card_elements_1 = require("./card-elements");
var Enums = require("./enums");
var serialization_1 = require("./serialization");
var registry_1 = require("./registry");
var enums_1 = require("./enums");
var strings_1 = require("./strings");
var swiper_1 = require("swiper");
var Utils = require("./utils");
var shared_1 = require("./shared");

There isn't much that any consuming application will be able to do to solve this. This is something that needs to be solved by the package owner.

One solution consumers can use is to use the package.json overrides property to downgrade swiper to ^6, you can do this with the following snippet added to your package.json.

{
  "dependencies": {
    "adaptivecards": "^3.0.2"
    // other dependencies
  },
  "overrides": {
      "adaptivecards": {
          "swiper": "^6.0.0"
      }
  }
}