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

@MananJoshi it's not reaching the class component code. I switched to a functional component and it still bombs out on the import { useTable } from 'react-table' — mj_
– mj_, Commented May 13, 2020 at 2:27
@MananJoshi I tried creating the codesandbox and the code worked in there. I found that in my rails project I never really had an include of react anywhere (the react.js file) so I added a script tag to application.js and that made it work. That can't be the right way to do it though. require("react") doesn't help. — mj_
– mj_, Commented May 14, 2020 at 2:25
@mj_ have you resolved the issue. I'm using version 7.1.0. The moment i use the import { useTable } from 'react-table' statement the application is failing — Ravi MCA
– Ravi MCA, Commented May 27, 2020 at 10:00

Wonerol · Accepted Answer · 2020-10-20 21:34:50Z

2

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"

answered Oct 20, 2020 at 21:34

Wonerol

1011 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jogesh_pi · Accepted Answer · 2020-05-12 02:56:09Z

0

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(
       <div>rendering</div>
    )
}

export default Taxonomies;

answered May 12, 2020 at 2:56

jogesh_pi

9,7745 gold badges40 silver badges65 bronze badges

1 Comment

mj_ Over a year ago

I took your exact code without the "...." and pasted it in my program. I still have the import { useTable } from 'react-table' at the top and that is throwing the same error.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related