Error while using state-machine-cat in NUXT application

[yugal-compro]

Use Case: I would like to use state-machine-cat in a NUXT application

Code: plugins/state-machine-cat.js

   import smcat from 'state-machine-cat';

   export default defineNuxtPlugin((nuxtApp) => ({
     provide: {
       smcat
     }
   }));

stateDiagram.vue

<template>
  <div>
    <h1>This is component of state diagram</h1>
    <div
      id="svg"
      v-html="svg"
    />
    <v-btn @click="showDiagram()">click me</v-btn>
  </div>

</template>

<script>

export default {
  setup() {
    const { $smcat } = useNuxtApp();
    let svg;
    try {
      const lSVGInAString = $smcat.render(
        `
            initial => backlog;
            backlog => doing;
            doing => test;
        `,
        {
          outputType: 'svg'
        }
      );
      // eslint-disable-next-line no-unused-vars
      svg = lSVGInAString;
    } catch (pError) {
      console.error(pError);
    }
    return {
      svg
    };
  }
<script/>

Expected Action: Show State Machine Diagram without any errors

Error Faced: Giving error inside state-machine-cat directory of node modules. Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

[sverweij]

hi @yugal-compro thanks for raising this issue. The error message you see is because the environment configured for the nuxt framework cannot handle modern JavaScript - from the screenshot of the error message it seems it doesn't support dynamic imports (since node 13, as well as in pretty ancient versions of most browsers) and/ or await which is supported since node 7.6, as well as even more ancient browser versions.

The specific complaint nuxt has seems to be about top level await which is a more recent development, but not particularly sparkly new either (see toplevel await compatibility table).

I'd advise to configure nuxt to more recent minimum versions of browsers and/ or nodejs versions.