Potentially replace react-timezone-select

[dysbulic]

We are in the process of integrating IDX more deeply into MyMeta and there's the possibility we will upgrade Next as part of the process.

The timezone select component requires transpiling to work with Next 10. There's a question if it will need that in v11 & if it does if it will work.

@dan13ram, what does the timezone select component do other than have a list of timezones & provide text search on the timezone field.

If it would be expedient to replace it, could we make do with a generic text search component rather than something timezone specific?

[tommymaher15]

Apparently there has been an update on react-timezone-select which was as follows:

"Update: Next.js 11.1.0 now supports ESM packages natively! Until 12.0.0 you need to include esmExternals: true in your next.js.config though."

is this worthwhile to look at or would it make more sense to continue and replace with a generic search as mentioned above?

[lucidcyborg]

Yeah is a good one to take a look at.
Currently the timezone package is being transpiled in next.config.js
Seems likely this solved the roadblock to upgrade of Next.js

[richteri]

Hi Guys, I'm working on the Next 11 & React 17 upgrade ticket and tried to use the esmExternals option with & without transpiling modules.

The first issue was that next does not allow global CSS imports but seems to be fixed by using next-global-css.

Currently I can't get over the issue below:

@metafam/ds: - Compiling modules...
@metafam/web: [0] error - ../design-system/dist/ds.esm.js:10:0
@metafam/web: [0] Module not found: Package path ./dist/index.js is not exported from package /home/irichter/dev/TheGame/node_modules/react-timezone-select (see exports field in /home/irichter/dev/TheGame/node_modules/react-timezone-select/package.json)
@metafam/web: [0]    8 | import cityTimezones from 'city-timezones';
@metafam/web: [0]    9 | import TimezoneSelect from 'react-timezone-select';
@metafam/web: [0] > 10 | import { i18nTimezones } from 'react-timezone-select/dist/index.js';
@metafam/web: [0]   11 | import spacetime from 'spacetime';
@metafam/web: [0]   12 | import informal from 'spacetime-informal';
@metafam/web: [0]   13 | export { default as styled } from '@emotion/styled';
@metafam/web: [0] 
@metafam/web: [0] Import trace for requested module:
@metafam/web: [0] ./pages/_app.tsx
@metafam/web: [0] 
@metafam/web: [0] https://nextjs.org/docs/messages/module-not-found

My point is that replacing the component by a custom-built one might still be easier.

I'll share my progress in a separate PR after some cleanup.

[lucidcyborg]

Pls continue conversation in #792