世纪巨坑：react 使用 xlsx-style导出，报错：Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx

最新推荐文章于 2024-02-01 10:12:49 发布

原创最新推荐文章于 2024-02-01 10:12:49 发布 · 3.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #css #es6

工具同时被 2 个专栏收录

31 篇文章

订阅专栏

React

29 篇文章

订阅专栏

博客讲述了在React项目中使用xlsx-style库遇到的'./cptable'模块未找到的错误。作者尝试了多种解决方案，如直接修改node_modules和调整vue.config.js，但这些都不适用于React项目。最终，通过修改webpack配置，在output下添加externals字段，将'./cptable'映射为'varcptable'成功解决了问题。此方法避免了对node_modules的直接修改，确保了代码的可复用性。

react 使用 xlsx-style导出，报错：Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx

问题：
1.网上大多数的解决方案都是直接改node_moudels，这样是非常不可取的方案，如果别人拉你的代码，直接npm install,岂不是别人也要去修改node_moudels？
2.还有一部分vue使用者给出解决方案，对vue.config.js进行修改，这个比较合理，但是我用的是react呀。。。
3.最后得出一个结论，要去修改webpack中的配置，让所有的./cptable都变成var cptable，那么问题来了，怎么修改？？？

解决方案：
我的解决方案是把config暴露出来，然后对其中的webpack.config.js文件进行更改：
在output下增加

externals: [
      {
          './cptable': 'var cptable',
          '../xlsx.js': 'var _XLSX'
      }
    ],

然后停掉项目，重新start，就不会报错了，而且样式也出现了。
~~小声bb:整整琢磨了一天，看了内网，外网所有关于这个问题的解决方案，写代码太磨人了~~