Compatibility of jspreadsheet-ce v4.13.4 with Nuxt 3

[alvintheodora]

Environment:

• jspreadsheet-ce Version: ^4.13.4
• Framework: Nuxt 3
• OS: macOS 13.3
• Browser : [Chrome Version 116.0.5845.179 (Official Build) (arm64)]

Description: I've been trying to integrate jspreadsheet-ce (version ^4.13.4) with a Nuxt 3 project. However, I encountered an error during the process.

Error Message: ReferenceError: self is not defined

Steps to Reproduce:

1. Set up a basic Nuxt 3 project.
2. Install jspreadsheet-ce with the version ^4.13.4.
3. Try to integrate jspreadsheet-ce in a Nuxt component/page.
4. Observe the error during [build/runtime (whichever is applicable)].

Expected Behavior: I expected the library to integrate smoothly with Nuxt 3 without any runtime errors.

Actual Behavior: Encountered a "self is not defined" error when trying to use the library.

Additional Context: I'm wondering if jspreadsheet-ce version ^4.13.4 is compatible with Nuxt 3, or if there are any known workarounds for this issue. Any guidance or suggestions would be greatly appreciated.

Thank you in advance for your assistance!

---

[killkli]

Be wary when using ssr framework such as Nuxt or Next. You have to make sure jspreadsheet is running in client environment instead of server side.

[alvintheodora]

In the documentation, it states "NextJS compatibility changes", does it mean ssr is available on the pro version , and not ce version?

[killkli]

You need to make a client side plugin to use it. I made an example for you:

make a file "jspreadsheet.client.ts"

import jspreadsheet from "jspreadsheet-ce";
import "jspreadsheet-ce/dist/jspreadsheet.css";
export default defineNuxtPlugin(() => {
  return {
    provide: {
      jspreadsheet,
    },
  };
});

put the file in plugins directory in your nuxt3 project

then you can call it as a plugin from useNuxtApp() Here's example, works in any page:

<template>
    <div>
        <div ref="spreadsheet"></div>
    </div>
</template>

<script setup>
const spreadsheet = ref(null);
const { $jspreadsheet } = useNuxtApp();
onMounted(() => {
    console.log($jspreadsheet);
    $jspreadsheet(spreadsheet.value, {
        data: [
            ["A", "B", "C"],
            ["D", "E", "F"],
            ["G", "H", "I"],
        ],
        minDimensions: [3, 3]
    });
});
</script>

Any client side modules should be used this way to ensure the code is excuded in browser.

[killkli]

Working example here: https://stackblitz.com/edit/github-pqerlg?file=app.vue