反应-样板错误:无法解析'/Users/react-boilerplate/node_modules/xlsx-style‘中的../xlsx

Question

当我运行npm安装时，我看到了这些错误。

​

    Building the Webpack DLL...
Hash: 7f68501fbcd6b8f05530
Version: webpack 4.12.0
Time: 3566ms
Built at: 08/05/2018 6:10:17 PM
                      Asset      Size                Chunks                    Chunk Names
reactBoilerplateDeps.dll.js  4.81 MiB  reactBoilerplateDeps  [emitted]  [big]  reactBoilerplateDeps
chunk {reactBoilerplateDeps} reactBoilerplateDeps.dll.js (reactBoilerplateDeps) 4.15 MiB [entry] [rendered]

WARNING in ./node_modules/xlsx-style/ods.js
Module not found: Error: Can't resolve '../xlsx' in '/Users/mehrnooshhajkhalil/react-boilerplate/node_modules/xlsx-style'
 @ ./node_modules/xlsx-style/ods.js
 @ ./node_modules/xlsx-style/xlsx.js
 @ ./node_modules/node-excel-export/lib/excel.js
 @ ./node_modules/node-excel-export/index.js
 @ dll reactBoilerplateDeps

ERROR in ./node_modules/xlsx-style/dist/cpexcel.js
Module not found: Error: Can't resolve './cptable' in '/Users/mehrnooshhajkhalil/react-boilerplate/node_modules/xlsx-style/dist'
 @ ./node_modules/xlsx-style/dist/cpexcel.js 807:16-41
 @ ./node_modules/xlsx-style/xlsx.js
 @ ./node_modules/node-excel-export/lib/excel.js
 @ ./node_modules/node-excel-export/index.js
 @ dll reactBoilerplateDeps

ERROR in ./node_modules/xlsx-style/xlsx.js
Module not found: Error: Can't resolve 'fs' in '/Users/mehrnooshhajkhalil/react-boilerplate/node_modules/xlsx-style'
 @ ./node_modules/xlsx-style/xlsx.js 1204:27-40 1340:8-24
 @ ./node_modules/node-excel-export/lib/excel.js
 @ ./node_modules/node-excel-export/index.js
 @ dll reactBoilerplateDeps

ERROR in ./node_modules/xlsx-style/ods.js
Module not found: Error: Can't resolve 'fs' in '/Users/mehrnooshhajkhalil/react-boilerplate/node_modules/xlsx-style'
 @ ./node_modules/xlsx-style/ods.js 58:8-24
 @ ./node_modules/xlsx-style/xlsx.js
 @ ./node_modules/node-excel-export/lib/excel.js
 @ ./node_modules/node-excel-export/index.js
 @ dll reactBoilerplateDeps

ERROR in ./node_modules/xlsx-style/ods.js
Module not found: Error: Can't resolve 'xlsx' in '/Users/mehrnooshhajkhalil/react-boilerplate/node_modules/xlsx-style'
 @ ./node_modules/xlsx-style/ods.js 13:21-41
 @ ./node_modules/xlsx-style/xlsx.js
 @ ./node_modules/node-excel-export/lib/excel.js
 @ ./node_modules/node-excel-export/index.js
 @ dll reactBoilerplateDeps
removed 1 package and audited 53190 packages in 30.134s

​

我也试过

rm -rf节点-模块npm干净缓存-强制npm安装

但是他们没有一个不解决我的问题。

节点版本: v10.8.0 npm版本: 6.2.0

Answer 1

我读过很多相关的话题，什么都试过了。但在我的例子中，这起到了作用:在externals中的Webpack配置中，将{ "../xlsx.js": "var _XLSX" }替换为{ "../xlsx": "var _XLSX" }

Answer 2

我被困在这个问题上就像一个星期，问题是当你想要使用任何使用excel的软件包时，他们使用fs是文件系统的缩写。浏览器没有。

因此，从前端的reactboilerplate导出excel文件几乎是不可能的，我确实使用了节点-excel-导出来处理它，然后为此编写了一个API：

​

export const exportIssues = (req, res) => {



  const styles = {
    headerDark: {
      fill: {
        fgColor: {
          rgb: 'FF000000'
        }
      },
      font: {
        color: {
          rgb: 'FFFFFFFF'
        },
        sz: 14,
        bold: true,
        underline: true
      }
    }
  };

//Here you specify the export structure
  const issueSpecification = {
    HousingManager: { // <- the key should match the actual data key
      displayName: 'Housing manager', // <- Here you specify the column header
      headerStyle: styles.headerDark, // <- Header style
      width: 120 // <- width in pixels
    },
    CompanyName: { // <- the key should match the actual data key
      displayName: 'Company name', // <- Here you specify the column header
      headerStyle: styles.headerDark, // <- Header style
      width: 120 // <- width in pixels
    },
    HousingManagerEmail: { // <- the key should match the actual data key
      displayName: 'Housing manager email', // <- Here you specify the column header
      headerStyle: styles.headerDark, // <- Header style
      width: 120 // <- width in pixels
    }
  }




  const issueData = [
    {HousingManager:'sss', CompanyName: 'xxx' , 	HousingManagerEmail:'xx@x.com'},
    {HousingManager:'sss', CompanyName: 'xxx' , 	HousingManagerEmail:'xx@x.com'},      
  ]

  const report = excel.buildExport(
    [ // <- Notice that this is an array. Pass multiple sheets to create multi sheet report
      {
        name: 'Issues', // <- Specify sheet name (optional)
        specification: issueSpecification, // <- Report specification
        data: issueData // <-- Report data
      }
    ]
  );

// You can then return this straight
  res.set("Content-Disposition", "attachment;filename=report.xlsx");
  res.set("Content-type", "application/vnd.ms-excel")
  res.attachment('report.xlsx'); // This is sails.js specific (in general you need to set headers)
  return res.send(report);


};

​

然后在前端调用此函数：

 exportIssues = (e) =>{

    axios.get('APIURL',{
      responseType: 'blob',
    })
    .then((response) => {
      download(response.data, "Issues.xlsx", "application/vnd.ms-excel");
    })
  };

Answer 3

我已经找到了解决办法。

请替换ods.js中的下列代码

if(typeof XLSX !== 'undefined') return XLSX.utils;
if(typeof module !== "undefined" && typeof require !== 'undefined') 
{
try 
{ 
    return require('./' + 'xlsx').utils; 
} 
catch(e) 
{ 
    try 
    { 
         return require('./' + 'xlsx').utils; 
    } 
    catch(ee) 
    { 
        return require('./xlsx').utils; 
    } 
 }
 throw new Error("Cannot find XLSX utils"); 
};