webpack externl配置导致运行报错“React is not defined”

最新推荐文章于 2024-06-28 15:08:48 发布

原创最新推荐文章于 2024-06-28 15:08:48 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

问题记录同时被 2 个专栏收录

21 篇文章

订阅专栏

webpack

6 篇文章

订阅专栏

在项目迭代中使用BizCharts时遇到打包后运行报错。经过排查发现，BizCharts依赖React，需先引入React库。正确顺序为：先引入React和ReactDOM，再引入BizCharts。解决方案是在HTML中按顺序添加React和BizCharts的CDN链接。

背景

项目迭代中引入bzichart用于图表封装，组内同学增加了webpack打包配置如下：
在这里插入图片描述
打包后运行报错，错误信息如下：

问题解决

一开始以为webpack external配置写法错误，仔细去查阅了webpack的官方文档后，仍没有定位到具体原因，继续查找相关问题资料：
终于找到一篇好文：https://juejin.cn/post/6844904190083350542
才发现问题所在，bzichart依赖react，必须放在bzicharts引入之前

<script src="https://g.alicdn.com/code/lib/react/16.8.5/umd/react.production.min.js"></script>
<script src="https://g.alicdn.com/code/lib/react-dom/16.8.5/umd/react-dom.production.min.js"></script>
<script src="https://g.alicdn.com/code/lib/bizcharts/4.0.14/BizCharts.js"></script>
    ```