Could not find a declaration file for module 'use-local-storage-state'.

[diegohaz]

TypeScript can't find the type declarations when using "moduleResolution": "node16" or "moduleResolution": "nodenext" on the tsconfig.json file.

Repro: https://codesandbox.io/p/sandbox/summer-sound-sjud2v?file=src%2FApp.tsx

[astoilkov]

Oo, interesting. Thanks for the repro! I will look into this today.

[diegohaz]

Thanks for the quick answer @astoilkov!

But now there's another error:

This expression is not callable.
  Type 'typeof import("/project/sandbox/node_modules/use-local-storage-state/index")' has no call signatures.typescript(2349)

https://codesandbox.io/p/sandbox/summer-sound-sjud2v?file=%2Fsrc%2FApp.tsx&selection=%5B%7B%22endColumn%22%3A58%2C%22endLineNumber%22%3A4%2C%22startColumn%22%3A58%2C%22startLineNumber%22%3A4%7D%5D

I think this is because, since this project is a commonjs module (there's no "type": "module" in the package.json), TypeScript is interpreting all .js files as commonjs, even the ones in the es folder.

If you can't set "type": "module" in the project's package.json, I think the solution is to keep the exports field that has been added in #59, but rename the files in the es folder from .js to .mjs and .d.ts to d.mts.

If you do use "type": "module", though, I think it would be the opposite: commonjs modules would have to use .cjs.

[astoilkov]

Yeah, I got that far as well.

I will actually make this module ESM only and fix the issue this way. This duality is hard to maintain and easy to break.

[astoilkov]

I think I fixed this in the latest version: https://codesandbox.io/p/sandbox/heuristic-wind-n6c8gm.

Let me know if you experience anything else so I can investigate more.

[avand]

I've added this package to my project and imported. Runs fine when I run npm run start but when I run my tests I get an error:

/Users/avand/Code/lopery-web/node_modules/use-local-storage-state/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import useLocalStorageState from './src/useLocalStorageState.js';

SyntaxError: Cannot use import statement outside a module

> 6 | import useLocalStorageState from 'use-local-storage-state';

Any recommendations on how to work around this?

[avand]

My work around, for now, is to copy/paste the code from this lib into our app. 🤫

[astoilkov]

Hey @avand

Aha, this is probably caused by your testing framework that transforms your code into CommonJS before running it. This happens because use-local-storage-state is ESM only.

In order to fix this, you can search on your testing library issues page and see how others resolve ESM issues. Another option is to move to something like vitest which does this by default.

Fixing it this way (rather than me publishing a CJS version) makes sense because more and more packages on NPM are becoming ESM only.