Webpack error when using React Table with nexjs

[fedesilvaponte]

I'm getting the following error when trying to use react table with the default webpack config of nextjs

error - ./node_modules/react-table/src/publicUtils.js 10:35
Module parse failed: Unexpected token (10:35)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| export const defaultRenderer = ({ value = '' }) => value;
> export const emptyRenderer = () => <>&nbsp;</>;

There's also this other error on the console, after the first one:

/.../.../.../node_modules/react-table/src/hooks/useTable.js:1
import React from 'react'
^^^^^^

SyntaxError: Cannot use import statement outside a module

For the table setup I'm using the example of the getting started page.

[datner]

Seems to work for me, I don't think it's related to react-table. Also according to the errors theres nothing to indicate a connection to react-table in the first place

working example: https://codesandbox.io/s/relaxed-pond-21gd0?file=/pages/index.js

[cavvon]

Make sure your import looks like import {useTable} from "react-table";

Intellij auto inserted it as import {useTable} from "react-table/src/hooks/useTable"; which gave me this same error

[fedesilvaponte]

Yes, that was exactly the issue. I eventually figured it out. That's what you get for blindly trusting Intelij autoimport.

[erikkubica]

import {useTable} from "react-table";

does not work for me, it's undefined. and with the intelli import, I get the error above.