How use import xlsx-style?

[VaskaDagamas]

Used webpack try import like import XLSX from 'xlsx-style' import * as FileSaver from 'file-saver'; or import * as XLXS from "xlsx-style" import * as FileSaver from 'file-saver'; but have next errors when compile

> ERROR in ./~/xlsx-style/dist/cpexcel.js
Module not found: Error: Can't resolve './cptable' in '/home/vasil/workplace/CientApp_SplitCode/node_modules/xlsx-style/dist'
 @ ./~/xlsx-style/dist/cpexcel.js 807:16-41
 @ ./~/xlsx-style/xlsx.js
 @ ./src/components/modules/reportsPage/generateXLSX.js
 @ ./src/components/modules/reportsPage/Report.jsx
 @ ./src/components/pages/reportsPage.jsx
 @ ./src/components/app.jsx
 @ ./src/entry.jsx
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./entry.jsx

ERROR in ./~/xlsx-style/xlsx.js
Module not found: Error: Can't resolve 'fs' in '/home/vasil/workplace/CientApp_SplitCode/node_modules/xlsx-style'
 @ ./~/xlsx-style/xlsx.js 1204:27-40 1340:8-24
 @ ./src/components/modules/reportsPage/generateXLSX.js
 @ ./src/components/modules/reportsPage/Report.jsx
 @ ./src/components/pages/reportsPage.jsx
 @ ./src/components/app.jsx
 @ ./src/entry.jsx
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./entry.jsx

ERROR in ./~/xlsx-style/ods.js
Module not found: Error: Can't resolve 'fs' in '/home/vasil/workplace/CientApp_SplitCode/node_modules/xlsx-style'
 @ ./~/xlsx-style/ods.js 58:8-24
 @ ./~/xlsx-style/xlsx.js
 @ ./src/components/modules/reportsPage/generateXLSX.js
 @ ./src/components/modules/reportsPage/Report.jsx
 @ ./src/components/pages/reportsPage.jsx
 @ ./src/components/app.jsx
 @ ./src/entry.jsx
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./entry.jsx

when import

import *as XLSX from 'xlsx'
import * as FileSaver from 'file-saver';
``` No error but style for sheets don't work
Can't undestartend what is wrong

[VaskaDagamas]

the following help me https://github.com/protobi/js-xlsx/issues/78#issuecomment-315063340

and add next config

module.exports = {
    // (...)
    plugins: [
        // (...)
        new webpack.IgnorePlugin(/cptable/)
    ],
    node: {
        fs: "empty"
    },
    externals: [
        {  "./cptable": "var cptable",  "./jszip": "jszip" }
    ]
};

[sky172839465]

Webpack 5 workaround:

1. Webpack 5 externals will add use strict cause runtime syntax error

   function (e) {
     "use strict";
     e.exports = jszip;
   }

2. So we need another workaround, add JSZip to global variable can prevent xlsx go to wrong import path too!
3. Update webpack5 config

   // webpack
   module.exports = {
     plugins: [
         new webpack.IgnorePlugin({ resourceRegExp: /cptable/ })
     ],
     resolve: {
       fallback: {
         fs: false,
         crypto: require.resolve('crypto-browserify'),
         stream: require.resolve('stream-browserify')
       }
     },
     externals: [
       {  './cptable': 'var cptable' }
     ]
   }

4. add global variable https://github.com/protobi/js-xlsx/blob/v0.8.6/xlsx.js#L1335

   // xlsxWithStyle.js
   import jszip from 'xlsx-style/dist/jszip'
   
   if (global.window) {
     window.JSZip = jszip
   } else {
     global.JSZip = jszip
   }
   
   const xlsxWithStyle = (async () => {
     const { default: xlsxStyle } = await import('xlsx-style')
     return xlsxStyle
   })()
   
   export default xlsxWithStyle

5. usage

   import xlsxWithStyle from './xlsxWithStyle'
   
   const asyncPkg = await xlsxWithStyle
   const AsyncXlsxWithStyle = await asyncPkg
   AsyncXlsxWithStyle.write()