Material-ui-pickers: "export 'default' (imported as 'clsx') was not found in 'clsx'

[EmiHel]

Environment

material-ui-pickers: "2.1.2",
"@material-ui/core": "3.9.0",
"react": "16.4.2",
"typescript": "3.0.1",
Browser: Chrome

Steps to reproduce

1. As soon as I have imported the pickers and hit save i get this error message several times in the console: ./node_modules/material-ui-pickers/dist/material-ui-pickers.esm.js 919:15-19
   "export 'default' (imported as 'clsx') was not found in 'clsx'

The only difference between the error messages is that it refers to different lines etc.

1. The way I have imported it: import { InlineDatePicker } from 'material-ui-pickers';

But if I import it like this: import { InlineDatePicker } from 'material-ui-pickers/DatePicker';
I get no error message and it says that it compiles successfully, tho I only see a white page where all other components are gone.

Expected behavior

To compile.

Actual behavior

Only error messages and it fails to compile.

[dmtrKovalenko]

Do you have

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

[EmiHel]

Do you have

{
  "compilerOptions": {
    "esModuleIntertop": true,
    "allowSyntheticDefaultImports": true
  }
}

Hi, Nope I did not, tho after I added it i got this: error TS5023: Unknown compiler option 'esModuleIntertop'.

[EmiHel]

Oh nvm saw that you had a typo in the code, esModuleIntertop should be esModuleInterop. Then i change my answer, yes i have it in tsconfig, tho still the same problem.

[Lleios]

I have same error

[cthurston]

Should clsx be a dependency in the package.json?

[dmtrKovalenko]

It is

[cthurston]

Right, I was looking in the main package and not the lib....

Interesting to note that I went into the package.json of clsx and changed:

  "module": "dist/clsx.mjs",

to

  "module": "dist/clsx.js",

It compiled and worked again.

[dmtrKovalenko]

Hi, it seems that webpack is trying to import clsx (a small 'classes' library). But something goes terribly wrong.

I'd suggest to remove and install your node_modules folder. Then make sure clsx comes along.

Besides that, imports should be done at the beginning of a file, before anything else. If there's more error, the very first (sensible) message tends to be the most useful of an error stack (the one at the top).

[storesbuzz]

Hi @dmtrKovalenko, I have done removing npm_modules folder and re-installing. Also all imports are at beginnig of file and no changes done after adding material-ui-picker, Still having the same error -

TypeError: __WEBPACK_IMPORTED_MODULE_13_clsx___default(...) is not a function
ModalDialog
E:/ProjectX/App/ClientApp/node_modules/material-ui-pickers/dist/material-ui-pickers.esm.js:719
  716 |   role: "dialog",
  717 |   onClose: onDismiss,
  718 |   classes: {
> 719 |     paper: clsx(classes.dialogRoot, (_b = {}, _b[classes.dialogRootWider] = wider, _b[classes.dialogWithTabs] = showTabs, _b))
  720 |   }
  721 | }, other), createElement(EventListener, {
  722 |   target: "window",
View compiled

mountIndeterminateComponent
E:/ProjectX/App/ClientApp/node_modules/react-dom/cjs/react-dom.development.js:14563
  14560 |   }
  14561 | 
  14562 |   ReactCurrentOwner$3.current = workInProgress;
> 14563 |   value = Component(props, context);
  14564 | }
  14565 | // React DevTools reads this flag.
  14566 | workInProgress.effectTag |= PerformedWork;
View compiled
beginWork

I am having no clue about error further, Kindly suggest.

[storesbuzz]

Hi, I tested it without redux-form just as normal form as well, Still getting the same error. When i remove following lines everything works as before.

<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <DatePicker
    value={this.state.selectedDate}
    onChange={this.handleDateChange}
  />
</MuiPickersUtilsProvider>

Here is my package.json

"@date-io/date-fns": "^1.1.0",
"@material-ui/core": "^3.6.0",
"date-fns": "^2.0.0-alpha.21",
"material-ui-pickers": "^2.2.1",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-redux": "^5.1.1",
"react-router-dom": "^4.4.0-beta.6",
"react-scripts": "1.0.17",
"react-test-renderer": "^16.6.3",
"redux": "^3.7.2",
"redux-form": "^7.3.0",

Is it related with react or material ui version?

[storesbuzz]

It's worked after i changed "module": "dist/clsx.mjs", to "module": "dist/clsx.js", in pakage.json (path to file: node_modules/clsx/package.json).

[TrySound]

@storesbuzz Do you use only webpack or webpack with typescript?

[storesbuzz]

I am using only webpack.

[TrySound]

Seems like the problem is mixing mjs and module field. Webpack sucks with mjs.

[lukeed]

Reverted to .js extension in [email protected]. Hopefully webpack does the right thing soon.

Thanks @TrySound for alerting me.

[NYannick]

Hi @dmtrKovalenko even if i upgrade [email protected], i still have the same error like @storesbuzz. May be because your package.json still using [email protected] ?

[TrySound]

@NYannick You need to remove material-ui-pickers and install again to upgrade transitive dependencies.

[TrySound]

Tell us if this will work for you.

[NYannick]

It work thank you @TrySound

[TrySound]

Cool. Thanks