SvelteKit 2.0 breaking "tabulator-tables" import statement

thisjt commented 1 month ago

Describe the bug

Importing the package "tabulator-tables" throws an error saying that it's a CJS module and it should be imported in a specific way. On SvelteKit 1 this importation is working fine as is but the issue started to happen when I upgraded to SvelteKit 2. This could also potentially be an issue with Vite but so far this issue is only happening for SvelteKit 2 and not on other frontend frameworks.

Here's the import code

import { TabulatorFull as Tabulator } from 'tabulator-tables';

This is currently my workaround for this issue

import * as Tabulator_Import from 'tabulator-tables';
const { TabulatorFull: Tabulator } = Tabulator_Import;

Here's the bug report that was opened on tabulator-tables. The author stated that it should work properly as is and it's weird that this is happening specifically only on SvelteKit. https://github.com/olifolkerd/tabulator/issues/4378

Here's the output of the issue

Reproduction

Here's a repo with the minimum reproducible issue: https://github.com/thisjt/tabulator-import-issue

clone the repo
npm install
npm run dev
navigate to the dev environment on the browser (http://localhost:5173)

Logs

No response

System Info

(GitHub Codespaces)
  System:
    OS: Linux 6.5 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (2) x64 AMD EPYC 7763 64-Core Processor
    Memory: 5.76 GB / 7.74 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.12.1 - ~/nvm/current/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 10.5.0 - ~/nvm/current/bin/npm
    pnpm: 8.15.6 - ~/nvm/current/bin/pnpm
  npmPackages:
    svelte: ^4.2.7 => 4.2.15

Severity

annoyance

dominikg commented 1 month ago

the package in question does not have "type": "module" in its package.json so .js files in it are considered to be commonjs. But /dist/js/tabulator_esm.js is esm. It should either have a .mjs extension or the package needs to change to "type":"module" and commonjs exports need a .cjs extension.

see https://publint.dev/tabulator-tables@6.2.1 and also https://antfu.me/posts/publish-esm-and-cjs

opening your reproduction in stackblitz shows a different error https://stackblitz.com/github/thisjt/tabulator-import-issue?file=README.md (looks like building an error stacktrace broke)

This is very unlikely to be caused by sveltekit. On the offchance it is, please provide a reproduction that shows tabulator-tables 6.0 working in sveltekit@1, not working in sveltekit@2 and also working in a generic vite 5 js project.

sveltekit is an esm first framework, and personally i would recommend using dependencies that also share this spirit.

thisjt commented 1 month ago

I have inform the author with your suggestions. I'm currently waiting for his reply. As of now, I have replicated the package working fine as is in sveltekit@1.5. I'm not sure if I'm doing the barebones vite@5 right but the importing is also working fine there. For sveltekit@2 I'm getting the same error as what you saw when trying to import the package so not sure what's up with that.

Sveltekit@1.5 barebones repro https://stackblitz.com/edit/vitejs-vite-pqilhv Sveltekit@2 barebones repro https://stackblitz.com/edit/vitejs-vite-dp8aka (broken with unrelated error) Vite@5 barebones repro https://stackblitz.com/edit/vitejs-vite-cdmwht

sveltejs / kit