I'm using the material ui pickers in a server-rendered NextJs application. The date time picker works fine on the first load, but when I refresh the page it gives me the following error.
Unexpected token export
/path/to/my/project/node_modules/material-ui-pickers/index.js:1
(function (exports, require, module, __filename, __dirname) { export { default as DatePicker } from './DatePicker/DatePickerWrapper';
^^^^^^
SyntaxError: Unexpected token export
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:537:28)
at Module._compile (/path/to/my/project/node_modules/source-map-support/source-map-support.js:492:25)
at Object.Module._extensions..js (module.js:584:10)
at Module.load (module.js:507:32)
at tryModuleLoad (module.js:470:12)
at Function.Module._load (module.js:462:3)
at Module.require (module.js:517:17)
at require (internal/module.js:11:18)
What could be cause for this error?
@dmtrKovalenko Should we change the output to common js? It's hard to support SSR like this.
Doing so, will force us to import the material-ui components directly since tree-shaking will go away.
@tharakabimal For now, import from material-ui-pickers/dist/material-ui-pickers.cjs.js
import {DatePicker} from 'material-ui-pickers/dist/material-ui-pickers.cjs.js';
@tharakabimal @alitaheri I think we will just add the cjs build reference to "main" and it would works, because I think we should support mostly es modules.
I will publish an extra release today, will fix that too
@dmtrKovalenko Keep in mind, the file index.js takes precedence over the module or main field of package.json. So maybe we should exclude the index.js file from the release? Or just rename it to something else that node.js won't recognize, like main.js or something.
Was fixed in 1.0.0-beta.7
Most helpful comment
@tharakabimal @alitaheri I think we will just add the cjs build reference to "main" and it would works, because I think we should support mostly es modules.
I will publish an extra release today, will fix that too