Monday, May 20, 2024
Homepage · reactjs
 Popular · Latest · Hot · Upcoming
165
rated 0 times [  169] [ 4]  / answers: 1 / hits: 6772  / 4 Years ago, thu, may 21, 2020, 12:00:00

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


More From » reactjs
 Answers
0

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} />;

}

[#3742] Tuesday, May 19, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
sonja
Add To Favorites
Follow
Total Points: 541
Total Questions: 113
Total Answers: 114
Location: Anguilla
Member since Sun, Jan 29, 2023
1 Year ago
sonja questions
Mon, Nov 30, 20, 00:00, 4 Years ago
Sun, Oct 11, 20, 00:00, 4 Years ago
Sun, Nov 10, 19, 00:00, 5 Years ago
Mon, Aug 26, 19, 00:00, 5 Years ago
Tue, Aug 20, 19, 00:00, 5 Years ago
View All
;