why would react-table get an error "react is undefined"

Question

I'm trying to integrate react-table into my application and I'm getting an error on the line import { useTable } from 'react-table'.

TypeError: React is undefined

The error happens on the line var safeUseLayoutEffect = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect; in react-table.development.js.

Why would react itself be undefined?


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 (
             x
        )
    }
}

user_858295 · Answer

I solved this problem by following the instructions in 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/);

If I understand it correctly, the problem is somehow a result of webpacker transpiling react-table and we solve it by excluding it from transpilation.

Firefox originally gave me a "React is undefined" error, but viewing the page in Chrome I instead saw "Cannot read property 'useLayoutEffect' of undefined"

user_790846 · Answer

The issue is not related to React but you are using the hooks in the class-based component. Where useTable, React. useMemo are the hooks.

Instead, convert your class-based component to a functional component.

const Taxonomies = () => {

    ....
    ....

    return(
       rendering
    )
}

export default Taxonomies;

why would react-table get an error "react is undefined"

2 Answers