无Node.js环境CDN引入react-table报useTable未定义错误

根因说明 #

• 全局变量挂载规则问题：通过script标签引入的react-table UMD构建包，所有API都挂载在全局window.ReactTable对象下，不会直接暴露useTable作为顶层全局变量，直接调用useTable自然会触发未定义报错。
• 资源路径语法错误：index.html中引入App.js和index.js的路径末尾多了多余的单引号，同时存在文件名大小写不匹配的问题，会导致JS资源加载失败。

修复步骤 #

1. 修正useTable的调用方式，在App.js代码最顶部添加解构逻辑：

const { useTable } = ReactTable
function App() {
  // 原有代码保持不变
}

或者直接修改useTable调用处的代码：

const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow,
} = ReactTable.useTable({ columns, data })

2. 修正index.html中的JS引入代码，删除多余的单引号，同时匹配文件名大小写：

<!-- 修改前错误写法 -->
<!-- <script type="text/babel" src="app.js'"></script>
<script type="text/babel" src="index.js'"></script> -->

<!-- 修改后正确写法 -->
<script type="text/babel" src="App.js"></script>
<script type="text/babel" src="index.js"></script>

完成以上两处修改后刷新页面即可正常运行。

内容的提问来源于stack exchange，提问作者Scott