Open alvintheodora opened 9 months ago
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.
In the documentation, it states "NextJS compatibility changes", does it mean ssr is available on the pro version , and not ce version?
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.
Working example here: https://stackblitz.com/edit/github-pqerlg?file=app.vue
Environment:
jspreadsheet-ce
Version: ^4.13.4Description: 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:
jspreadsheet-ce
with the version ^4.13.4.jspreadsheet-ce
in a Nuxt component/page.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!