Failed Importing the Lib

[KiddoV]

Try using this lib, but got error:

<script lang="ts">
import { onMount } from 'svelte';
import jspreadsheet from 'jspreadsheet-ce';
import 'jspreadsheet-ce/dist/jspreadsheet.css';

// Global Variables
export let jsprInst: jspreadsheet.JspreadsheetInstance = null;
export let jsprOpts: jspreadsheet.JSpreadsheetOptions = {};

// Local Variables
let tableEl: HTMLDivElement;
let defaultOpts: jspreadsheet.JSpreadsheetOptions = {
    minDimensions: [1000, 100000]
};

onMount(() => {
    jsprInst = jspreadsheet(tableEl, {...defaultOpts, ...jsprOpts});
});

</script>

<div bind:this={tableEl}></div>

Error:

'default' is not exported by node_modules/jspreadsheet-ce/dist/index.js, imported by src/components/jspreadsheet-ce.svelte
    1: <script lang="ts">
    2: import { onMount } from 'svelte';
    3: import jspreadsheet from 'jspreadsheet-ce';
              ^
    4: import 'jspreadsheet-ce/dist/jspreadsheet.css';
    error during build:
    Error: 'default' is not exported by node_modules/jspreadsheet-ce/dist/index.js, imported by src/components/jspreadsheet-ce.svelte
    ...

Any idea what might happened? Thanks,

[KiddoV]

Any update on this?

[Cristian-Ayala]

It's Rollup Error (vite use Rollup). Another error ref link

...indicates that jspreadsheet-ce/dist/index.js doesn't have an export default statement. That's because it's a CommonJS module – its entire contents are as follows: module.exports = require('./lib/index');

How to Fix it:

You should install commonjs

npm i @rollup/plugin-commonjs

Import it in vite.config.js

import commonjs from "@rollup/plugin-commonjs";

Add commonjs to plugins array (at the beginning):

commonjs({
    include: ["node_modules/jspreadsheet-ce/**"],
}),

EXAMPLE of vite.config.js:

import commonjs from "@rollup/plugin-commonjs";
import inject from "@rollup/plugin-inject";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import AutoImport from "unplugin-auto-import/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import Components from "unplugin-vue-components/vite";
import { defineConfig } from "vite";
import sourcemapExclude from "./src/core/sourceMapExclude";

const isInDevMode = process.env.NODE_ENV === "development";

export default defineConfig({
  build: {
    sourcemap: isInDevMode,
    commonjsOptions: {
      sourceMap: isInDevMode,
    },
    minify: isInDevMode,
    cssMinify: "esbuild",
    rollupOptions: {
      cache: isInDevMode,
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
        sourcemapIgnoreList: (relativeSourcePath) => {
          const normalizedPath = path.normalize(relativeSourcePath);
          return normalizedPath.includes("node_modules");
        },
      },
    },
  },
  plugins: [
    commonjs({
      include: ["node_modules/jspreadsheet-ce/**"],
    }),
    vue({
      include: ["**/*.vue"],
    }),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      extensions: ["vue", "md"],
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass",
          directives: true,
          version: "2.1.5",
        }),
      ],
    }),
    inject({
      jQuery: "jquery",
      "window.jQuery": "jquery",
      $: "jquery",
      exclude: "**/*.css",
    }),
    sourcemapExclude({ excludeNodeModules: !isInDevMode }),
  ],
  css: {
    devSourcemap: true,
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/element-plus/theme/customTheme.scss" as *;`,
      },
    },
  },
  resolve: {
    extensions: [".vue", ".js"],
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
  define: {
    __VUE_I18N_FULL_INSTALL__: true,
    __VUE_I18N_LEGACY_API__: false,
    __INTLIFY_PROD_DEVTOOLS__: false,
  },
});