change-case: Import failing after upgrade to v5

Package has been working fine with v4.1.2

However, after upgrading to v5, I get the following error:

Cannot find module 'change-case' or its corresponding type declarations.

My import command is just import { camelCase } from 'change-case', which worked fine before. 🤷‍♂️

About this issue

  • Original URL
  • State: closed
  • Created 9 months ago
  • Reactions: 24
  • Comments: 26 (15 by maintainers)

Most upvoted comments

@emanuel-lundman I thought more about your point overnight and added types back for all the packages. Hopefully it alleviates some of the TypeScript pain, but it doesn’t add CommonJS so it may introduce a different set of confusion. I’ll make a backlog of the issues flagged from this about the ESM ecosystem and maybe myself or someone else can help improve the tooling:

  1. Improve the TypeScript error to indicate it’s an ESM package, instead of Cannot find module 'change-case' or its corresponding type declarations. https://github.com/microsoft/TypeScript/issues/55104
  2. Fix NPM unable to detect “types” for header when using ESM (TODO: Find repo and issue).
  3. Investigate an alternative to BundlePhobia that supports ESM https://github.com/pastelsky/bundlephobia/issues/379

In another issue someone shared this and it was very helpful way to debug TypeScript/ESM support: https://arethetypeswrong.github.io

I’ve found that I needed to do three things to get it just about working:

  1. upgrade typescript to >=5. (but < 5.2 because angular)
  2. use 'moduleResolution': 'bundler'. All others fail.
  3. set 'type': 'module' in the package.json

However all of our tests now fail because Karma doesn’t support ESM imports in their conf.js and ESM doesn’t support requires. We’re also not too comfortable changing the moduleResolution unless we can guarantee the same behavior and only using change-case for case insensitive splitting in a few places, so messing with the moduleResolution` and all the changes that brings seems a little excessive when we could just split the strings another way.

Might also be a problem with moduleResolution being set to node in tsconfig in the projects trying to use change-case. If you’ve got a recent version of typescript one could probably switch to bundler instead and keep approximately the same behaviour, but importing change-case would start working, it worked when I tried it out. This is because change-case package.json doesn’t include a module field pointing to the dist folder, and ts projects still using node as moduleResolution will fail to find the types. They don’t seem to know anything about the exports field.

change-case could add it, it won’t do any harm to the project I guess, and it would work for those old typescript projects as well, probably a lot of projects not changing the moduleResolution that often. Or perhaps hint at the solution in the docs for anyone trying to figure it out?

I noticed it in a project that uses a lot of other esm-packages, but types for change-case didn’t work.