"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.

2. 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 clsx@1.0.3. Hopefully webpack does the right thing soon.

Thanks @TrySound for alerting me.

[NYannick]

Hi @dmtrKovalenko even if i upgrade clsx@1.0.3, i still have the same error like @storesbuzz. May be because your package.json still using clsx@1.0.2 ?

[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

[baroxFPTU]

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

I'm use with Typescript, and it have error: Type error: Cannot find module 'clsx' or its corresponding type declarations.
How can fix it?

[LukasTy]

I'm use with Typescript, and it have error: Type error: Cannot find module 'clsx' or its corresponding type declarations. How can fix it?

Have you tried following this suggestion?
If it doesn't help, you could consider applying this fix using patch-package or some other method. 🤔

Sorry, we can't provide any further support beyond that as this package is no longer supported.
If you want the best experience with most up-to-date fixes, please consider upgrading to @mui/x-date-pickers. 😉