Should it work in IE11?

[Jose Cortés]

I'm trying this hook (btw, thanks to all collaborators, an excellent work 👏 👏 ) and I found it doesn't work in Internet Explorer 11 and I don't even know if it's expected to work in such an old browser.

This is the crash I'm having in IE11:

It seems logic since IE11 doesn't support classes.

Here I created a clean example with Create React App to reproduce it: https://github.com/vasconita/rehooks-local-storage-issue-report

If this library is expected to support IE11 I can take a look later this week to try to solve it.

[Joe]

Ah, the reason that it does not work is because of this line:

https://github.com/rehooks/local-storage/blob/master/tsconfig.json#L4

We simply need to change it to
"target": "es5"

[Jose Cortés]

Cool! It doesn't seem to have major implications and it could be a nice change since Create React App doesn't transpile from ES6 any code in node_module.

If you need help to search for implications, test or pr this, please let me know.

[Nick Bottomley]

Also hit this problem. Would you be open to a PR changing the target?

[Nick Bottomley]

This actually isn't as straight forward as I thought. There are types inside React (and I guess inside babel too from this output from tsc) that require ES6.

node_modules/@types/babel__template/index.d.ts:16:28 - error TS2583: Cannot find name 'Set'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.

16     placeholderWhitelist?: Set<string>;
                              ~~~

node_modules/@types/react/index.d.ts:377:23 - error TS2583: Cannot find name 'Set'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.

377         interactions: Set<SchedulerInteraction>,
                          ~~~

src/local-storage-events.ts:55:53 - error TS2339: Property 'includes' does not exist on type 'string'.

55         if (err instanceof TypeError && err.message.includes('circular structure')) {
                                                       ~~~~~~~~


Found 3 errors.

the final error is in the library and would be easily fixable using indexOf but I'm not sure what to do about the first two.

[Joe]

Ah, adding the following property should fix those errors:

{
  // inside tsconfig.json
  "lib": ["es2015"]
}

that way TS will create the shims for those too when specifying "target": "es5"

[Manvendra Singh]

I tried to do this in tsconfig.json

"target": "ES5", 
"lib": ["ES6"],

But it's not working and I'm getting following errors, I don't have any idea why. I'm not an expert of TS and found the relevant information here https://stackoverflow.com/a/42097465. @jharrilim

Please let me know what I'm missing and I'll raise a PR.

src/local-storage-events.ts:16:50 - error TS2304: Cannot find name 'CustomEvent'.

16 export class LocalStorageChanged<TValue> extends CustomEvent<KVP<string, TValue>> {
                                                    ~~~~~~~~~~~

src/local-storage-events.ts:16:50 - error TS4020: 'extends' clause of exported class 'LocalStorageChanged' has or is using private name 'CustomEvent'.

16 export class LocalStorageChanged<TValue> extends CustomEvent<KVP<string, TValue>> {
                                                    ~~~~~~~~~~~

src/local-storage-events.ts:52:9 - error TS2304: Cannot find name 'localStorage'.

52         localStorage.setItem(key, typeof value === 'object' ? JSON.stringify(value) : `${value}`);
           ~~~~~~~~~~~~

src/local-storage-events.ts:53:9 - error TS2304: Cannot find name 'window'.

53         window.dispatchEvent(new LocalStorageChanged({ key, value }));
           ~~~~~~

src/local-storage-events.ts:89:5 - error TS2304: Cannot find name 'localStorage'.

89     localStorage.removeItem(key);
       ~~~~~~~~~~~~

src/local-storage-events.ts:90:5 - error TS2304: Cannot find name 'window'.

90     window.dispatchEvent(new LocalStorageChanged({ key, value: null }))
       ~~~~~~

src/use-localstorage.ts:56:5 - error TS2552: Cannot find name 'localStorage'. Did you mean 'localState'?

56     localStorage.getItem(key) === null
       ~~~~~~~~~~~~

  src/use-localstorage.ts:55:10
    55   const [localState, updateLocalState] = useState<TValue | null>(
                ~~~~~~~~~~
    'localState' is declared here.

src/use-localstorage.ts:58:18 - error TS2552: Cannot find name 'localStorage'. Did you mean 'localState'?

58       : tryParse(localStorage.getItem(key)!)
                    ~~~~~~~~~~~~

  src/use-localstorage.ts:55:10
    55   const [localState, updateLocalState] = useState<TValue | null>(
                ~~~~~~~~~~
    'localState' is declared here.

src/use-localstorage.ts:61:70 - error TS2304: Cannot find name 'StorageEvent'.

61   const onLocalStorageChange = (event: LocalStorageChanged<TValue> | StorageEvent) => {
                                                                        ~~~~~~~~~~~~

src/use-localstorage.ts:65:17 - error TS2339: Property 'detail' does not exist on type 'LocalStorageChanged<unknown>'.

65       if (event.detail.key === key) {
                   ~~~~~~

src/use-localstorage.ts:66:32 - error TS2339: Property 'detail' does not exist on type 'LocalStorageChanged<unknown>'.

66         updateLocalState(event.detail.value);
                                  ~~~~~~

src/use-localstorage.ts:79:5 - error TS2304: Cannot find name 'window'.

79     window.addEventListener(LocalStorageChanged.eventName, listener);
       ~~~~~~

src/use-localstorage.ts:82:5 - error TS2304: Cannot find name 'window'.

82     window.addEventListener('storage', listener);
       ~~~~~~

src/use-localstorage.ts:86:9 - error TS2304: Cannot find name 'localStorage'.

86     if (localStorage.getItem(key) === null && defaultValue !== null) {
           ~~~~~~~~~~~~

src/use-localstorage.ts:91:7 - error TS2304: Cannot find name 'window'.

91       window.removeEventListener(LocalStorageChanged.eventName, listener);
         ~~~~~~

src/use-localstorage.ts:92:7 - error TS2304: Cannot find name 'window'.

92       window.removeEventListener('storage', listener);
         ~~~~~~


Found 16 errors.

[Aman Gupta Karmani]

Could we get a new release with this fix?