react-table won't load with next.js

[Hewlbern]

Bug report

index.js:1 The above error occurred in the

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. @ 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. @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:170
callInvokeWithMethodAndArg @ runtime.js:169
enqueue @ runtime.js:192
prototype. @ 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. @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:170
callInvokeWithMethodAndArg @ runtime.js:169
enqueue @ runtime.js:192
prototype. @ 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. [as next] (runtime.js:97)
at tryCatch (runtime.js:45)
at invoke (runtime.js:135)
at runtime.js:170
at new Promise ()
at callInvokeWithMethodAndArg (runtime.js:169)
at AsyncIterator.enqueue [as _invoke] (runtime.js:192)
at AsyncIterator.prototype. [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. [as next] (runtime.js:97)
at tryCatch (runtime.js:45)
at invoke (runtime.js:135)
at runtime.js:170
at new Promise ()
at callInvokeWithMethodAndArg (runtime.js:169)
at AsyncIterator.enqueue [as _invoke] (runtime.js:192)
at AsyncIterator.prototype. [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. @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:170
callInvokeWithMethodAndArg @ runtime.js:169
enqueue @ runtime.js:192
prototype. @ 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. @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:170
callInvokeWithMethodAndArg @ runtime.js:169
enqueue @ runtime.js:192
prototype. @ 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 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.

Describe the bug

React-Table will not load inside a next.js page.
A clear and concise description of what the bug is.

To Reproduce

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

export default function index() {

const 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
}]
const columns = [{
Header: 'Name',
accessor: 'name'
},{
Header: 'Age',
accessor: 'age'
}]

const searchRef = useRef(null);
const [message, setMessage] = useState(null);

const [productList, setProductList] = useState([]);
const [searched, setSearched] = useState(false);

async function handleSearch() {
console.log("searching...", searchRef.current?.value);
setMessage("Searching...");
var headers = {
"Content-Type": "application/x-www-form-urlencoded",
"auth-token": token,
};

fetch(
  `xx` +
  encodeURIComponent(searchRef.current.value),
  {
    method: "GET",
    headers: headers,
  }
)
  .then((response) => {
    setMessage("");
    if (response.status !== 200) {
      console.log("erROR", response);
      return null;
    } else {
      console.log("success", response);
      let productList = response.json()
      console.log("data", productList)
      return productList;
    }
  })
  .then((responseData) => {
    console.log("responseData", responseData);

    // setting resonseData to productList
    setProductList(responseData);
    setSearched(true)
  });

}

if (token == null) {
return (

You must be logged in to continue.

Login

);
}

return (

Unlimited....POWER!

    <div>
      <div className="bg-white shadow p-4 flex">
        <span className="w-auto flex justify-end items-center text-gray-500 p-2">
          <i className="material-icons text-3xl">search</i>
        </span>
        <input
          className="w-full rounded p-2"
          type="text"
          placeholder="Try 'Phone'"
          ref={searchRef}
        />
        <button
          onClick={handleSearch}
          className="bg-red-400 hover:bg-red-300 rounded text-white p-2 pl-4 pr-4"
        >
          <p className="font-semibold text-xs">Search</p>
        </button>
      </div>

      <p>{message}</p>

      <div>
        <p></p>

        <Chart data={productList} />
        <div>  
          <ReactTable  
              data={data}  
              columns={columns}  
              defaultPageSize = {2}  
              pageSizeOptions = {[2,4, 6]}  
          />  
      </div>  
      </div>
      <table className="table-auto">
        <thead>
          <tr>
            <th className="px-4 py-2">Name</th>
            <th className="px-4 py-2">Price</th>
            <th className="px-4 py-2">Brand</th>
          </tr>
        </thead>
        <tbody>
          {productList.map((e, index) => (
            <tr key={index}>
              <td className="border px-4 py-2">{e.Product}</td>
              <td className="border px-4 py-2">{e.Price}</td>
              <td className="border px-4 py-2">{e.Brand}</td>
            </tr>
          ))}
        </tbody>
      </table>
      </div>


    </div>

</Layout>

);
}
Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: [e.g. macOS, Windows]
• Browser (if applies) [e.g. chrome, safari]
• Version of Next.js: [e.g. 6.0.2]
• Version of Node.js: [e.g. 10.10.0]

Additional context

Add any other context about the problem here.

[jamesmosier]

Could you provide a repository with a code sample?

Also what version of react-table are you using?

I tested your code with "react-table": "6.7.0-alpha-0" and it worked.

But if I upgrade to version 7 it does not, as that version uses a different API.