IDropdownRef and IMultiSelectRef Not Found

[ztroop]

Observing an issue while building the application with expo:

react-native-element-dropdown: ^2.9.0

web compiled with 2 warnings
WARNING in ./node_modules/react-native-element-dropdown/lib/module/index.js:7
export 'IDropdownRef' (reexported as 'IDropdownRef') was not found in './components/Dropdown/model' (module has no exports)
  5 | import { IMultiSelectRef } from './components/MultiSelect/model';
  6 | 
> 7 | export { Dropdown, MultiSelect, SelectCountry, IDropdownRef, IMultiSelectRef };
  8 | 

WARNING in ./node_modules/react-native-element-dropdown/lib/module/index.js:7
export 'IMultiSelectRef' (reexported as 'IMultiSelectRef') was not found in './components/MultiSelect/model' (module has no exports)
  5 | import { IMultiSelectRef } from './components/MultiSelect/model';
  6 | 
> 7 | export { Dropdown, MultiSelect, SelectCountry, IDropdownRef, IMultiSelectRef };
  8 | 

[bjacog]

@ztroop I could work around this by applying the type keyword to the imports.

See https://github.com/webpack/webpack/issues/7378 and https://javascript.plainenglish.io/leveraging-type-only-imports-and-exports-with-typescript-3-8-5c1be8bd17fb

I'll submit a PR, but I am not familiar with TS, so someone else might just need to test it.

Here is my patch at the moment, created using patch-package. This is only necessary for builds.

diff --git a/node_modules/react-native-element-dropdown/lib/module/index.js b/node_modules/react-native-element-dropdown/lib/module/index.js
index f9175a7..1d839e3 100644
--- a/node_modules/react-native-element-dropdown/lib/module/index.js
+++ b/node_modules/react-native-element-dropdown/lib/module/index.js
@@ -1,7 +1,7 @@
 import Dropdown from './components/Dropdown';
 import MultiSelect from './components/MultiSelect';
 import SelectCountry from './components/SelectCountry';
-import { IDropdownRef } from './components/Dropdown/model';
-import { IMultiSelectRef } from './components/MultiSelect/model';
-export { Dropdown, MultiSelect, SelectCountry, IDropdownRef, IMultiSelectRef };
+// import { IDropdownRef } from './components/Dropdown/model';
+// import { IMultiSelectRef } from './components/MultiSelect/model';
+export { Dropdown, MultiSelect, SelectCountry, /* IDropdownRef, IMultiSelectRef */ };
 //# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/node_modules/react-native-element-dropdown/lib/typescript/index.d.ts b/node_modules/react-native-element-dropdown/lib/typescript/index.d.ts
index c7e2a53..96ec0c9 100644
--- a/node_modules/react-native-element-dropdown/lib/typescript/index.d.ts
+++ b/node_modules/react-native-element-dropdown/lib/typescript/index.d.ts
@@ -1,7 +1,7 @@
 import Dropdown from './components/Dropdown';
 import MultiSelect from './components/MultiSelect';
 import SelectCountry from './components/SelectCountry';
-import { IDropdownRef } from './components/Dropdown/model';
-import { IMultiSelectRef } from './components/MultiSelect/model';
+import type { IDropdownRef } from './components/Dropdown/model';
+import type { IMultiSelectRef } from './components/MultiSelect/model';
 export { Dropdown, MultiSelect, SelectCountry, IDropdownRef, IMultiSelectRef };
 //# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/node_modules/react-native-element-dropdown/src/index.tsx b/node_modules/react-native-element-dropdown/src/index.tsx
index bc5f7fc..4267f32 100644
--- a/node_modules/react-native-element-dropdown/src/index.tsx
+++ b/node_modules/react-native-element-dropdown/src/index.tsx
@@ -1,7 +1,7 @@
 import Dropdown from './components/Dropdown';
 import MultiSelect from './components/MultiSelect';
 import SelectCountry from './components/SelectCountry';
-import { IDropdownRef } from './components/Dropdown/model';
-import { IMultiSelectRef } from './components/MultiSelect/model';
+import type { IDropdownRef } from './components/Dropdown/model';
+import type { IMultiSelectRef } from './components/MultiSelect/model';

 export { Dropdown, MultiSelect, SelectCountry, IDropdownRef, IMultiSelectRef };

[phatnguyentan]

same issue

[cjmling]

5 months and PR not merged :( . The issue is still there

[ztroop]

@cjmling There hasn't been any activity from the author/maintainer in this repository for over 6 months. More broadly, the author's activity on the platform has been pretty sparse as of late. Someone could either volunteer to help maintain the library or fork it before it becomes abandonware.

[amaneer94]

Faced same issue. Is there a solution or workaround for this ongoing issue?

[totallytotallyamazing]

@bjacog Your solution which seems logical, did not work for me, made several attempts with different configurations to no avail. Did you or anyone else have any luck with your patch-package solution? if it's working, What version of node are you using?

*** Also react-native-element-dropdown version 2.10.1 is the latest recent update but after upgrading my app it made no difference.

*** other than web my react native expo sdk 49 app is working fine in ios and android.

Identical to @ztroop 's, my error for expo sdk 49 web [BELOW]:

WARNING in ./node_modules/react-native-element-dropdown/lib/module/index.js:7
export 'IDropdownRef' (reexported as 'IDropdownRef') was not found in './components/Dropdown/model' (module has no exports)
  5 | import { IMultiSelectRef } from './components/MultiSelect/model';
  6 |
> 7 | export { Dropdown, MultiSelect, SelectCountry, IDropdownRef, IMultiSelectRef };
  8 |

WARNING in ./node_modules/react-native-element-dropdown/lib/module/index.js:7
export 'IMultiSelectRef' (reexported as 'IMultiSelectRef') was not found in './components/MultiSelect/model' (module has no exports)
  5 | import { IMultiSelectRef } from './components/MultiSelect/model';
  6 |
> 7 | export { Dropdown, MultiSelect, SelectCountry, IDropdownRef, IMultiSelectRef };
  8 |

web compiled with 2 warnings

UPDATE: Was previously using node -v 20 but with: node -v 18 and % npx expo start --tunnel I'm getting:

web compiled successfully

But but also getting standard error in Chrome (Browser Terminal):

provider.ts:239 Uncaught Error: Component auth has not been registered yet
    at Provider.initialize (provider.ts:239:1)
    at initializeAuth (initialize.ts:66:1)
    at ./firebase.js (firebase.js:30:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)
    at ./hooks/useAuth.js (firebase.js:34:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)
    at ./screens/HomeScreen.js (ChatScreen.js:39:1)
    at __webpack_require__ (bootstrap:22:1) 

Thanks in advance!