reactjs - 为什么react-table会出现错误 "react is undefined"

Question

我正在尝试将react-table集成到我的应用程序中，但在import { useTable } from 'react-table'行上收到错误。

TypeError: React is undefined

错误发生在 var safeUseLayoutEffect = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect; 行上在react-table.development.js中。

为什么 react 本身是未定义的？

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

import { useTable } from 'react-table'


export default class Taxonomies extends React.Component {

    taxonomyRows = () => {
        return data = React.useMemo(
            () => [
            {
                full_code: '1',
                level1: 'a',
                level2: 'b',
                level3: 'c',
                level4: 'd'
            },
            {
                full_code: '2',
                level1: 'e',
                level2: 'f',
                level3: 'g',
                level4: 'h'
            },
            {
                full_code: '3',
                level1: 'i',
                level2: 'j',
                level3: 'k',
                level4: 'l'
            },
            ],
            []
        )
    }

    taxonomyColumns = () => {
        return columns = React.useMemo(
          () => [
            {
              Header: 'Full Code',
              accessor: 'full_code',
            },
            {
              Header: 'Level 1',
              accessor: 'level1',
            },
            {
              Header: 'Level 2',
              accessor: 'level2',
            },
            {
              Header: 'Level 3',
              accessor: 'level3',
            },
            {
              Header: 'Level 4',
              accessor: 'level4',
            },
          ],
          []
        )
    }


    render = () => {
        const columns = this.taxonomyColumns()
        const data = this.taxonomyRows()
        const {
            getTableProps,
            getTableBodyProps,
            headerGroups,
            rows,
            prepareRow,
        } = useTable({ columns, data })

        return (
            <div> x</div>
        )
    }
}

Answer 1

我按照https://github.com/tannerlinsley/react-table/discussions/2048中的说明解决了这个问题。

config/webpack/environment.js

const nodeModulesLoader = environment.loaders.get('nodeModules');
if (!Array.isArray(nodeModulesLoader.exclude)) {
  nodeModulesLoader.exclude = nodeModulesLoader.exclude == null ? [] : [nodeModulesLoader.exclude];
}

nodeModulesLoader.exclude.push(/react-table/);

如果我理解正确的话，问题是 webpacker 转译 React-table 的结果，我们通过将其排除在转译之外来解决它。

Firefox 最初给了我一个“React 未定义”错误，但在 Chrome 中查看该页面时，我看到了“无法读取未定义的属性‘useLayoutEffect’”