search

zillow / react-slider

Accessible, CSS agnostic, slider component for React.
https://zillow.github.io/react-slider
MIT License
883 stars 231 forks source link

This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag. #209

Closed deadcoder0904 closed 3 years ago

deadcoder0904 commented 3 years ago

Description

When I use import ReactSlider from 'react-slider' I get the following error (red-squiggly lines) in VSCode:

This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

The way to overcome allowSyntheticDefaultImports is to use it as import * as ReactSlider from 'react-slider' so I tried that & my console was filled with errors & the app crashed:

popup.js:69479 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `wrappedComponent`.
    at chrome-extension://debbgbhhohmjgdmndiakoejhjdggnigc/popup.js:40882:73
    at div
    at chrome-extension://debbgbhhohmjgdmndiakoejhjdggnigc/popup.js:40882:73
    at div
    at App (chrome-extension://debbgbhhohmjgdmndiakoejhjdggnigc/popup.js:73213:55)
printWarning @ popup.js:69479
error @ popup.js:69455
createElementWithValidation @ popup.js:71474
(anonymous) @ popup.js:73889
(anonymous) @ popup.js:40882
(anonymous) @ popup.js:41168
trackDerivedFunction @ popup.js:43834
track @ popup.js:44372
useObserver @ popup.js:41166
(anonymous) @ popup.js:40882
renderWithHooks @ popup.js:17113
updateFunctionComponent @ popup.js:19484
updateSimpleMemoComponent @ popup.js:19343
updateMemoComponent @ popup.js:19220
beginWork @ popup.js:21263
beginWork$1 @ popup.js:26063
performUnitOfWork @ popup.js:24902
workLoopSync @ popup.js:24830
renderRootSync @ popup.js:24793
performSyncWorkOnRoot @ popup.js:24416
scheduleUpdateOnFiber @ popup.js:24004
updateContainer @ popup.js:27605
(anonymous) @ popup.js:28144
unbatchedUpdates @ popup.js:24554
legacyRenderSubtreeIntoContainer @ popup.js:28143
render @ popup.js:28226
./src/popup.tsx @ popup.js:74361
__webpack_require__ @ popup.js:74653
(anonymous) @ popup.js:74727
(anonymous) @ popup.js:74729
popup.js:27181 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `wrappedComponent`.
    at createFiberFromTypeAndProps (popup.js:27181)
    at createFiberFromElement (popup.js:27209)
    at createChild (popup.js:15574)
    at reconcileChildrenArray (popup.js:15847)
    at reconcileChildFibers (popup.js:16253)
    at reconcileChildren (popup.js:19118)
    at updateHostComponent (popup.js:19760)
    at beginWork (popup.js:21208)
    at HTMLUnknownElement.callCallback (popup.js:6073)
    at Object.invokeGuardedCallbackDev (popup.js:6122)

The app doesn't crash when I use import ReactSlider from 'react-slider' but I get red-squiggly lines which I always get rid of since I use TS.

Would love to find a solution to this?

deadcoder0904 commented 3 years ago

Meanwhile I'm setting allowSyntheticDefaultImports to true in tsconfig.json :)

stonebk commented 3 years ago

Sorry, I don't use VSCode or TypeScript, so I'm not sure what issue you are having. Somebody contributed type support a while back -- is it as simple as installing that?

npm install --save-dev @types/react-slider
deadcoder0904 commented 3 years ago

I installed that already but TypeScript yelled at me. Doing this fixed the issue but maybe the types can be improved so we don't have to set that flag in tsconfig.json.

Idk TypeScript very well either. Just started using it so don't know as well what's wrong 🤔

The current fix works for me but maybe someone else who knows TS well can chime in :)

loichuder commented 3 years ago

The error

This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

could be fixed by putting export default instead of export = in @types/react-slider.

But I don't know if this raises compatibility issues. Any input @axelboc ?

axelboc commented 3 years ago

You're right @loichuder, it should be export default, since that's how ReactSlider is exported in https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.jsx.

Until this is fixed, it seems the best solution is actually to import the package with this TypeScript syntax: import ReactSlider = require('react-slider');, as explained here: https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require

deadcoder0904 commented 3 years ago

Or use allowSyntheticDefaultImports in tsconfig.json which is much cleaner imo :)

stonebk commented 3 years ago

Thanks all for investigating! Going to close this since the problem is external.

loichuder commented 3 years ago

This should now be fixed by https://github.com/DefinitelyTyped/DefinitelyTyped/pull/50819 (published in @types/react-slider@1.1.1)