Material-table: "SyntaxError: Unexpected token export" in Next.js

[d3vhound]

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:760:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (/Users/devionvillegas/Developer/D3VHOUND/wh-admin/node_modules/@material-ui/pickers/dist/material-ui-pickers.js:7:32)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (/Users/devionvillegas/Developer/D3VHOUND/wh-admin/node_modules/material-table/dist/components/m-table-edit-field.js:32:16)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)

happens when you start a new next js project and add this line

import MaterialTable from "material-table";

[punkael]

Running into the same error, with create-react-app, here's what I'm seeing:

run:
yarn jest some.test.js

sometest.test.js:
import MaterialTable from "material-table";

outputs:

/node_modules/@babel/runtime/helpers/esm/extends.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export default function _extends() {
                                                                                             ^^^^^^

    SyntaxError: Unexpected token export

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (node_modules/@material-ui/pickers/dist/material-ui-pickers.js:11:32)

[emrekara37]

Hi @d3vhound and @punkael ,
Which version of MT do you use?

[Huntedpix]

Hi !

I have the same issue with the latest version of MT (1.42.0).
React (16.7.0-alpha.2).
React-hot-loader (4.8)

My output:

vm.js:74 Uncaught SyntaxError: Unexpected token export
    at new Script (vm.js:74)
    at createScript (vm.js:246)
    at Object.runInThisContext (vm.js:298)
    at Module._compile (internal/modules/cjs/loader.js:678)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:722)
    at Module.load (internal/modules/cjs/loader.js:620)
    at tryModuleLoad (internal/modules/cjs/loader.js:559)
    at Function.Module._load (internal/modules/cjs/loader.js:551)
    at Module.require (internal/modules/cjs/loader.js:658)
    at require (internal/modules/cjs/helpers.js:20)

Hope this helps.

[punkael]

Hi @emrekara37
We're using 1.40.0, and have tried 1.41, 1.42 and 1.43 with same results.

[rogerclotet]

I'm having the same issue when I update to 1.42 or 1.43, using create-react-app.

When running tests I get this failure:

  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    [...]/node_modules/@babel/runtime/helpers/esm/extends.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export default function _extends() {
                                                                                             ^^^^^^

    SyntaxError: Unexpected token export

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (node_modules/@material-ui/pickers/dist/material-ui-pickers.js:7:32)

I'm trying to investigate further, it seems to be related to the @material-ui/pickers library, and I tried to install a peer dependency npm warned me about (@date-io/core) with no luck.

Seeing the error message makes me think it could have something to do with the path imports for @material-ui/core (https://github.com/mbrn/material-table/pull/835), but it doesn't make much sense. Maybe @Xammie could help here?

[iamdevlinph]

Next.js repo to replicate this issue.

I tried with CRA and the issue is not there. You can check on this CRA repo

EDIT: I only did yarn start in the CRA repo. And yarn run dev on the next.js one.

[iamdevlinph]

And another thing. I only get the issue being reported here if I have @material-ui/core installed. If it's not installed then I get the error I reported in #923

Don't know if it's related

[rogerclotet]

@iamdevlinph I tried your CRA repo and I have the exact same issue doing yarn install and yarn test. In my CRA repo I only have that issue when running tests, to be clear.

I'm still trying to find out a way to fix the issue, but no luck for now.

[y3sh]

I've coordinated a fix -- material-ui pickers had a babel problem, and they released a fix. Just need to update the deps here.

material-table PR https://github.com/mbrn/material-table/pull/931

Related -- https://github.com/mui-org/material-ui-pickers/issues/1219

[iamdevlinph]

I can verify that the issue is fixed but is it really necessary to have @material-ui/core installed too? Cause without it on my package.json I get the following error:

[ error ] ./node_modules/@material-ui/pickers/esm/DateTimePicker/DateTimePickerToolbar.js
Module not found: Can't resolve '@material-ui/core' in '/mnt/e/url/node_modules/@material-ui/pickers/esm/DateTimePicker'

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.