[BUG] Types not found with TypeScript 4.7 in ESM mode

[rossng]

1. Read the FAQs 👇

2. Describe the bug

The next version of TypeScript, 4.7, introduces proper support for ESM. It now also supports the package.json exports map. A consequence of this appears to be that the exports map already specified in framer-motion effectively hides the types field and so TypeScript cannot find the types any more.

In the case of the repro below, you will see the following error:

main.ts:1:16 - error TS7016: Could not find a declaration file for module 'framer-motion'. '/home/projects/vitejs-vite-pj1qjj/node_modules/framer-motion/dist/cjs/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/framer-motion` if it exists or add a new declaration (.d.ts) file containing `declare module 'framer-motion';`

1 import {} from 'framer-motion';

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

A CodeSandbox minimal reproduction will allow us to quickly follow the reproduction steps. Without one, this bug report won't be accepted.

https://stackblitz.com/edit/vitejs-vite-pj1qjj?file=main.ts

4. Steps to reproduce

Steps to reproduce the behavior:

1. Run npm run build

5. Expected behavior

The build should succeed (code itself is trivial/doesn't do anything).

6. Video or screenshots

N/A

7. Environment details

TypeScript 4.7.1-rc

Further details: microsoft/TypeScript#46334

[LuisAlejandro]

This still happens for me with typescript 4.7.4 and framer-motion 6.3.16

Repro: https://stackblitz.com/edit/vitejs-vite-caff2t?file=package.json

[rossng]

I am still encountering issues due to framer-motion pulling in popmotion (and some of its sister packages) which have basically the same problem.

I have opened a PR on that package to address this.

[rossng]

After some experimenting, I think the remaining issue is that the existence of the exports map will now cause TypeScript to ignore the top-level types key when in CJS/require mode. The solution for this appears to just be moving the types property up to the top-level of the exports map so that it is always available (rather than only in the import context). I've opened a PR which would do this.