React-Table报错：propTypes.js出现Uncaught SyntaxError: Unexpected Identifier

嘿，我之前也碰到过几乎一模一样的问题！结合你给出的版本信息——React 16.2.0、React-Table 6.8.0、Prop-Types 15.6.1——这个Uncaught SyntaxError: Unexpected Identifier错误，大概率是因为模块导入语法的兼容性问题导致的。简单来说，浏览器直接读到了未转译的ES模块import语句，而你的构建环境或者依赖包的打包格式没处理好这部分。

下面是几个亲测有效的解决方案，你可以挨个试试：

1. 让构建工具转译node_modules里的react-table和prop-types #

很多构建工具（比如Webpack）默认会跳过node_modules目录的转译，但React-Table 6.8.0和Prop-Types 15.6.1的部分代码可能还是ES模块语法，旧版的转译配置没覆盖到。

如果用Webpack，你可以修改webpack.config.js里的Babel规则，把这两个包排除在“跳过转译”的名单外：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        // 只排除node_modules里除了react-table和prop-types之外的包
        exclude: /node_modules\/(?!(react-table|prop-types)\/)/,
        use: 'babel-loader',
      },
    ],
  },
};

修改完后重启构建服务，应该能解决语法错误问题。

2. 调整Prop-Types的版本 #

有时候特定版本的Prop-Types和React-Table的打包格式不兼容，你可以试试降级到prop-types@15.5.10——这个版本的打包结构更适配旧版的React生态依赖。执行下面的命令更新依赖：

npm install prop-types@15.5.10 --save

3. 重置依赖安装 #

如果上面的方法都没用，可能是依赖安装过程中出现了损坏。你可以：

• 删除项目根目录下的node_modules文件夹
• 删除package-lock.json（或者yarn.lock，如果你用Yarn的话）
• 重新执行npm install（或yarn install）
  等待依赖重新安装完成后，再启动项目看看问题是否消失。

4. 确认浏览器版本 #

虽然概率不高，但如果你的谷歌浏览器版本太旧，可能不支持ES模块的裸导入语法。可以把浏览器升级到最新稳定版，再测试一下。

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