react-table 在 next.js 中出现渲染问题

Question

Trying to import a basic table function into my next application. For some reason it won't load into the index, even though it's an example output and should really work!

// Layouts
import Layout from "../components/Layout/Layout";
// import Table from "../components/Visualization/Table";
import ReactTable from "react-table";   



export default function LandingPage() {


  
  return (
    <Layout>

      <div className="container mx-auto pt-32">
        <h1>
          Gödel!
        </h1>
        <div>REAL-ESTATE PRESCIENCE - THE BEST INVESTMENT YOU'VE EVER MADE.</div>
        <ReactTable  
                  data=  {[{  
                    name: 'Ayaan',  
                    age: 26  
                    },{  
                     name: 'Ahana',  
                     age: 22  
                     },{  
                     name: 'Peter',  
                     age: 40      
                     },{  
                     name: 'Virat',  
                     age: 30  
                     },{  
                     name: 'Rohit',  
                     age: 32  
                     },{  
                     name: 'Dhoni',  
                     age: 37  
                     }]}
                  columns={[{  
                    Header: 'Name',  
                    accessor: 'name'  
                    },{  
                    Header: 'Age',  
                    accessor: 'age'  
                    }]  } 
                  defaultPageSize = {2}  
                  pageSizeOptions = {[2,4, 6]}  
              />  
        
       
        </div>

    </Layout>



  )
}

It's returning a render error as shown here.

It's returning this sort of error

index.js:1 The above error occurred in the <div> component:
    in div (at Table.js:33)
    in Table (at pages/index.tsx:157)
    in div (at pages/index.tsx:153)
    in div (at pages/index.tsx:132)
    in div (at pages/index.tsx:128)
    in div (at Layout.js:21)
    in div (at Layout.js:14)
    in Layout (at pages/index.tsx:127)
    in index (at _app.js:8)
    in MyApp
    in Container (created by AppContainer)
    in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, MyApp.
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6
logCapturedError @ react-dom.development.js:19527
logError @ react-dom.development.js:19564
callback @ react-dom.development.js:20744
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19858
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
hydrate @ react-dom.development.js:24823
renderReactElement @ index.js:39
doRender$ @ index.js:45
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:170
callInvokeWithMethodAndArg @ runtime.js:169
enqueue @ runtime.js:192
prototype.<computed> @ runtime.js:97
push../node_modules/regenerator-runtime/runtime.js.exports.async @ runtime.js:219
doRender @ index.js:41
render$ @ index.js:26
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:170
callInvokeWithMethodAndArg @ runtime.js:169
enqueue @ runtime.js:192
prototype.<computed> @ runtime.js:97
push../node_modules/regenerator-runtime/runtime.js.exports.async @ runtime.js:219
render @ index.js:26
(anonymous) @ next-dev.js:9
(anonymous) @ fouc.js:4
requestAnimationFrame (async)
displayContent @ fouc.js:4
(anonymous) @ next-dev.js:9
Promise.then (async)
(anonymous) @ next-dev.js:7
./node_modules/next/dist/client/next-dev.js @ next-dev.js:11
__webpack_require__ @ bootstrap:855
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js?ts=1590030597138:1
Show 21 more frames
_app.js:7 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Table`.
    at createFiberFromTypeAndProps (react-dom.development.js:23965)
    at createFiberFromElement (react-dom.development.js:23988)
    at reconcileSingleElement (react-dom.development.js:14233)
    at reconcileChildFibers (react-dom.development.js:14293)
    at reconcileChildren (react-dom.development.js:16762)
    at updateHostComponent (react-dom.development.js:17302)
    at beginWork (react-dom.development.js:18627)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.hydrate (react-dom.development.js:24823)
    at renderReactElement (index.js:39)
    at doRender$ (index.js:45)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:274)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at tryCatch (runtime.js:45)
    at invoke (runtime.js:135)
    at runtime.js:170
    at new Promise (<anonymous>)
    at callInvokeWithMethodAndArg (runtime.js:169)
    at AsyncIterator.enqueue [as _invoke] (runtime.js:192)
    at AsyncIterator.prototype.<computed> [as next] (runtime.js:97)
    at Object.push../node_modules/regenerator-runtime/runtime.js.exports.async (runtime.js:219)
    at doRender (index.js:41)
    at render$ (index.js:26)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:274)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at tryCatch (runtime.js:45)
    at invoke (runtime.js:135)
    at runtime.js:170
    at new Promise (<anonymous>)
    at callInvokeWithMethodAndArg (runtime.js:169)
    at AsyncIterator.enqueue [as _invoke] (runtime.js:192)
    at AsyncIterator.prototype.<computed> [as next] (runtime.js:97)
    at Object.push../node_modules/regenerator-runtime/runtime.js.exports.async (runtime.js:219)
    at render (index.js:26)
    at next-dev.js:9
    at fouc.js:4
createFiberFromTypeAndProps @ react-dom.development.js:23965
createFiberFromElement @ react-dom.development.js:23988
reconcileSingleElement @ react-dom.development.js:14233
reconcileChildFibers @ react-dom.development.js:14293
reconcileChildren @ react-dom.development.js:16762
updateHostComponent @ react-dom.development.js:17302
beginWork @ react-dom.development.js:18627
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
hydrate @ react-dom.development.js:24823
renderReactElement @ index.js:39
doRender$ @ index.js:45
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:170
callInvokeWithMethodAndArg @ runtime.js:169
enqueue @ runtime.js:192
prototype.<computed> @ runtime.js:97
push../node_modules/regenerator-runtime/runtime.js.exports.async @ runtime.js:219
doRender @ index.js:41
render$ @ index.js:26
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:170
callInvokeWithMethodAndArg @ runtime.js:169
enqueue @ runtime.js:192
prototype.<computed> @ runtime.js:97
push../node_modules/regenerator-runtime/runtime.js.exports.async @ runtime.js:219
render @ index.js:26
(anonymous) @ next-dev.js:9
(anonymous) @ fouc.js:4
requestAnimationFrame (async)
displayContent @ fouc.js:4
(anonymous) @ next-dev.js:9
Promise.then (async)
(anonymous) @ next-dev.js:7
./node_modules/next/dist/client/next-dev.js @ next-dev.js:11
__webpack_require__ @ bootstrap:855
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js?ts=1590030597138:1
Show 17 more frames
index.js:1 The above error occurred in the <MyApp> component:
    in MyApp
    in Container (created by AppContainer)
    in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, Container.

I would love to be pointed in the right direction here - > Very confused about why it wouldn't work given the component appears to be very straightforward in it's logic.

Confused about trying to solve this issue - Is it to do with how next.js works?

Update

After implementing typescript types for react-table i get this error instead,

JSX element type 'ReactTable' does not have any construct or call signatures.
    186 |             <Chart data={productList} />
    187 |             <div>
  > 188 |               <ReactTable
        |                ^
    189 |                 data={data}
    190 |                 columns={columns}
    191 |                 defaultPageSize={2}

Sandbox here

https://codesandbox.io/s/mystifying-monad-ulg5v?file=/pages/index.js

Answer 1

You aren't using react-table properly. I removed the unnecessary stuff.

import React from "react";
import { useTable } from "react-table";

function Table({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

export default function index() {
  const data = React.useMemo(
    () => [
      {
        name: "Ayaan",
        age: 26
      },
      {
        name: "Ahana",
        age: 22
      },
      {
        name: "Peter",
        age: 40
      },
      {
        name: "Virat",
        age: 30
      },
      {
        name: "Rohit",
        age: 32
      },
      {
        name: "Dhoni",
        age: 37
      }
    ],
    []
  );

  const columns = React.useMemo(
    () => [
      {
        Header: "Name",
        accessor: "name"
      },
      {
        Header: "Age",
        accessor: "age"
      }
    ],
    []
  );

  return <Table columns={columns} data={data} />;
}