React-Table giving an Uncaught SyntaxError: Unexpected Identifier in propTypes.js

Question

我一直在使用 React-Table 库时遇到问题，其中 Google Chrome 在 [=29] 的第一行显示未捕获的语法错误：意外标识符=] (import PropTypes from 'prop-types').

我运行以下版本的相关包：反应：16.2.0 反应-Table：6.8.0 道具类型：15.6.1

这是我调用 react-table:

的文件中的代码

import React from "react";
import { render } from "react-dom";
import ReactTable from "react-table";

import { Tips } from "./Utils";
import "react-table/react-table.css";

class SmartGridTable extends React.Component {
  constructor() {
    super();
    this.renderEditable = this.renderEditable.bind(this);
  }

  renderEditable(header, cellInfo){
    return(
      <input key={cellInfo.original.PartId + header + cellInfo.value} defaultValue={cellInfo.value} onBlur={(e) => {this.props.updateRecord(e, cellInfo.original)}} data-field={header}/>
    )
  }

  render() {
    const { records, columns } = this.props;
    let tableColumns = columns.map((col) => {
      return {
        Header: col.DisplayName,
        accessor: col.Name,
        Cell: this.renderEditable.bind(null, col.Name)
      }
    })
    return (
      <div>
        <ReactTable
          data={records}
          columns={tableColumns}
          defaultPageSize={25}
          className="-striped -highlight"
        />
        <br />
        <Tips />
    </div>
    );
  }
}

export default SmartGridTable;

这里是来自 react-table 库本身的 propTypes.js 文件（Chrome 表示第一行有语法问题）：

import PropTypes from 'prop-types'

export default {
  // General
  data: PropTypes.array,
  loading: PropTypes.bool,
  showPagination: PropTypes.bool,
  showPaginationTop: PropTypes.bool,
  showPaginationBottom: PropTypes.bool,
  showPageSizeOptions: PropTypes.bool,
  pageSizeOptions: PropTypes.array,
  defaultPageSize: PropTypes.number,
  showPageJump: PropTypes.bool,
  collapseOnSortingChange: PropTypes.bool,
  collapseOnPageChange: PropTypes.bool,
  collapseOnDataChange: PropTypes.bool,
  freezeWhenExpanded: PropTypes.bool,
  sortable: PropTypes.bool,
  resizable: PropTypes.bool,
  filterable: PropTypes.bool,
  defaultSortDesc: PropTypes.bool,
  defaultSorted: PropTypes.array,
  defaultFiltered: PropTypes.array,
  defaultResized: PropTypes.array,
  defaultExpanded: PropTypes.object,
  defaultFilterMethod: PropTypes.func,
  defaultSortMethod: PropTypes.func,

  // Controlled State Callbacks
  onPageChange: PropTypes.func,
  onPageSizeChange: PropTypes.func,
  onSortedChange: PropTypes.func,
  onFilteredChange: PropTypes.func,
  onResizedChange: PropTypes.func,
  onExpandedChange: PropTypes.func,

  // Pivoting
  pivotBy: PropTypes.array,

  // Key Constants
  pivotValKey: PropTypes.string,
  pivotIDKey: PropTypes.string,
  subRowsKey: PropTypes.string,
  aggregatedKey: PropTypes.string,
  nestingLevelKey: PropTypes.string,
  originalKey: PropTypes.string,
  indexKey: PropTypes.string,
  groupedByPivotKey: PropTypes.string,

  // Server-side Callbacks
  onFetchData: PropTypes.func,

  // Classes
  className: PropTypes.string,
  style: PropTypes.object,

  // Component decorators
  getProps: PropTypes.func,
  getTableProps: PropTypes.func,
  getTheadGroupProps: PropTypes.func,
  getTheadGroupTrProps: PropTypes.func,
  getTheadGroupThProps: PropTypes.func,
  getTheadProps: PropTypes.func,
  getTheadTrProps: PropTypes.func,
  getTheadThProps: PropTypes.func,
  getTheadFilterProps: PropTypes.func,
  getTheadFilterTrProps: PropTypes.func,
  getTheadFilterThProps: PropTypes.func,
  getTbodyProps: PropTypes.func,
  getTrGroupProps: PropTypes.func,
  getTrProps: PropTypes.func,
  getTdProps: PropTypes.func,
  getTfootProps: PropTypes.func,
  getTfootTrProps: PropTypes.func,
  getTfootTdProps: PropTypes.func,
  getPaginationProps: PropTypes.func,
  getLoadingProps: PropTypes.func,
  getNoDataProps: PropTypes.func,
  getResizerProps: PropTypes.func,

  // Global Column Defaults
  columns: PropTypes.arrayOf(
    PropTypes.shape({
      // Renderers
      Cell: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      Header: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      Footer: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      Aggregated: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      Pivot: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      PivotValue: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      Expander: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      Filter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),

      // All Columns
      sortable: PropTypes.bool, // use table default
      resizable: PropTypes.bool, // use table default
      filterable: PropTypes.bool, // use table default
      show: PropTypes.bool,
      minWidth: PropTypes.number,

      // Cells only
      className: PropTypes.string,
      style: PropTypes.object,
      getProps: PropTypes.func,

      // Pivot only
      aggregate: PropTypes.func,

      // Headers only
      headerClassName: PropTypes.string,
      headerStyle: PropTypes.object,
      getHeaderProps: PropTypes.func,

      // Footers only
      footerClassName: PropTypes.string,
      footerStyle: PropTypes.object,
      getFooterProps: PropTypes.object,
      filterMethod: PropTypes.func,
      filterAll: PropTypes.bool,
      sortMethod: PropTypes.func,
    }),
  ),

  // Global Expander Column Defaults
  expanderDefaults: PropTypes.shape({
    sortable: PropTypes.bool,
    resizable: PropTypes.bool,
    filterable: PropTypes.bool,
    width: PropTypes.number,
  }),

  pivotDefaults: PropTypes.object,

  // Text
  previousText: PropTypes.node,
  nextText: PropTypes.node,
  loadingText: PropTypes.node,
  noDataText: PropTypes.node,
  pageText: PropTypes.node,
  ofText: PropTypes.node,
  rowsText: PropTypes.node,

  // Components
  TableComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  TheadComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  TbodyComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  TrGroupComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  TrComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  ThComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  TdComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  TfootComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  FilterComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  ExpanderComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  PivotValueComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  AggregatedComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  // this is a computed default generated using
  PivotComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  // the ExpanderComponent and PivotValueComponent at run-time in methods.js
  PaginationComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  PreviousComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  NextComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  LoadingComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  NoDataComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  ResizerComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  PadRowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element])
}

和 webpack.config.js 文件：

module.exports = {
  entry: [
    'babel-polyfill',
    './Scripts/App.js',
    ],
  output: {
    filename: 'Scripts/ReactBundle/bundle.js'
  },
  resolve: {
    extensions: ['.Webpack.js', '.web.js', '.js', '.jsx'],
    mainFields: ["main"]
  },
  module: {
      rules: [
        {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        },
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',               
            query:
                  {
                      presets: ['react', 'es2017', 'es2015', 'stage-2'],
                      plugins: ['transform-class-properties']
                  }
        },
      ]
  },  
}

这不会中断代码的执行，它只是阻止我浏览源代码或在调试器中正确查看内容，但我非常感谢任何有关正在发生的事情的见解。

谢谢！

Answer 1

更新：解决提问者的评论。

如果您正在使用 webpack（很可能与 babel 一起使用），请确保 resolve.mainFields is not set to anything other than main. I'm wonder why the browser is complaining about the import syntax when that should have been transpiled out by babel. On npm, the prop-types package declares its main entry 为 index.js，这是一个 CommonJS 模块。如果 webpack 正在捆绑该文件，它应该能够处理 prop-types。

原文：

你运行你的代码是通过像 webpack 这样的打包器来编写的吗？如果您使用 script 标签将 prop-types 放到您的页面上，则需要使用 prebuilt JS file.

import ReactTable from "react-table" 行不起作用，因为那是 ES 模块，要在 chrome 中使用 ES 模块，您需要使用 type="module" 属性对其进行标记。

Answer 2

我刚遇到这个问题，在查看包后，我导入了 table，如下所示：

import ReactTable from 'react-table/lib'

看起来它包含转译后的 ES6，但没有导致错误的导入语法。

React-Table giving an Uncaught SyntaxError: Unexpected Identifier in propTypes.js

React-Table giving an Uncaught SyntaxError: Unexpected Identifier in propTypes.js

reactjs

google-chrome

webpack

react-proptypes

react-table