js-xlsx icon indicating copy to clipboard operation
js-xlsx copied to clipboard

The "./cptable" Error resolve way(only when you use frontend framework).

Open RexHung0302 opened this issue 3 years ago • 4 comments

First, thank the author create this plugins.

I use xlsx-style and got an error like others, but a find a way to resolve(only when you use frontend framework) the error without do edit /node_modules/xlsx-style/dist/cptable.js, the resolve way is by webpack.config.js.

  • If you use Vue.js you can create vue.config.js and write these:
module.exports = {
  configureWebpack: () => {
    var obj = {
      externals: {
        "./cptable": "var cptable",
      },
    };
    return obj;
  },
};

  • If you use React you must install react-app-rewired and customize-cra, then create config-overrides.js on your project './', file content write these:
const { override, addWebpackExternals } = require("customize-cra");

module.exports = override(
  addWebpackExternals({
    "./cptable": "var cptable",
  })
);

I'm do the demo in my repositories, you can pull and try.

I'm not try angular, sorry.

RexHung0302 avatar Jul 28 '21 20:07 RexHung0302

how to fix it when using vite (or rollup)?

HandsomeOne avatar Dec 20 '21 11:12 HandsomeOne

how to fix it when using vite (or rollup)?

Hi, u can set it on vite.config.js.

https://vitejs.dev/config/#configuring-vite

RexHung0302 avatar Mar 13 '22 11:03 RexHung0302

how to fix it when using vite (or rollup)?

Hi, u can set it on vite.config.js.

https://vitejs.dev/config/#configuring-vite

How to configure on vite? Can you provide a demo

1029800858 avatar Apr 15 '24 07:04 1029800858

how to fix it when using vite (or rollup)?

Hi, u can set it on vite.config.js. https://vitejs.dev/config/#configuring-vite

How to configure on vite? Can you provide a demo

sure, you can try this

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      external: ['./cptable'],
      output: {
        globals: {
          './cptable': 'cptable',
        },
      },
    },
  },
})

I got those code from GPT, you can try it and let me know how it work, thx.

RexHung0302 avatar Apr 15 '24 15:04 RexHung0302