Could not find a declaration file for module '@testing-library/user-event'

[4zuko]

Hi guys. I'm using:

"@testing-library/user-event": "^14.2.1",
"typescript": "^4.7.4"

and IntelliJ as a code editor.

If I change moduleResolution from node to NodeNext in compilerOptions (tsconfig.json), and try to import the userEvent:

import userEvent from '@testing-library/user-event';

I am getting following error message:

TS7016: Could not find a declaration file for module '@testing-library/user-event'. 
'..../node_modules/@testing-library/user-event/dist/index.cjs' implicitly has an 'any' type. 
Try `npm i --save-dev @types/testing-library__user-event` if it exists 
or add a new declaration (.d.ts) file containing `declare module '@testing-library/user-event';

I tried both suggestions but any of them doesn't fix the issue.

Adding the comment // @ts-ignore above the import fixes the issue. And I still have the typings and build doesn't fail.

What is the preferred approach for solving this issue? Please advise. Thanks.

[TxHawks]

The fix, or at least a fix, would be to add "types": "./dist/types/index.d.ts" inside exports in package.json like this:

  "exports": {
    ".": {
      "types": "./dist/types/index.d.ts",
      "require": "./dist/index.cjs",
      "default": "./dist/index.mjs"
    }
  },

See the relevant bit from the TypeScript docs here towards the end of the page.

I'd make a Pull Request, but the build script uses @ph-fritsche's external config library, which might not want or need this.

[TxHawks]

@ph-fritsche Any change you can give guidance on resolving this?

[ph-fritsche]

Thanks for the report and the suggested solution. If we can verify that this doesn't break any other consuming projects, I'm happy to add this to the build script.
But I'd like to verify how this interacts with typesVersions - if it should replace it and/or if there should be other adjustments.

An issue has also been filed on this topic here: #1024

[TxHawks]

Based on this StackOverflow answer, the two features seem to play nice together.

Since this package doesn't declare typesVersions, I assume this is a concern of the build script outside of the concerns of this library?

[ph-fritsche]

typesVersions is automatically added if an exports field is added:
https://unpkg.com/browse/@testing-library/[email protected]/package.json

[ph-fritsche]

The mentioned Stackoverflow answer isn't up-to-date. The exports[path].types field wasn't used by Typescript at the time.
I added it to the build script anyway. With the current version typesVersions seems to have no effect if there is an exports entry and nodeResolution is node16/nodeNext.

[paul-vd]

I don't understand the solution for when this package is being consumed.

[TxHawks]

Thank you. @4zuko I think this question can be marked as answered now

[jalooc]

@TxHawks @ph-fritsche would you mind clarifying what exactly is the solution to the OP problem? I can't see how the comment marked as answer solves it 🧐

[ph-fritsche]

The solution was to add types to the exports map on user-event as suggested by @TxHawks – which was applied.

package.json of [email protected]

  "main": "./dist/cjs/index.js",
  "module": "./dist/esm/index.js",
  "types": "./dist/types/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/types/index.d.ts",
      "require": "./dist/cjs/index.js",
      "default": "./dist/esm/index.js"
    },
    "./dist/cjs/*.js": {
      "types": "./dist/types/*.d.ts",
      "import": "./dist/esm/*.js",
      "default": "./dist/cjs/*.js"
    },
    "./dist/esm/*.js": {
      "types": "./dist/types/*.d.ts",
      "default": "./dist/esm/*.js",
      "require": "./dist/cjs/*.js"
    }
  },
  "typesVersions": {
    "*": {
      "dist/types/*": [
        "./dist/types/*"
      ],
      "dist/cjs/*.js": [
        "./dist/types/*.d.ts"
      ],
      "dist/esm/*.js": [
        "./dist/types/*.d.ts"
      ],
      "*": [
        "./dist/types/*.d.ts"
      ]
    }

[mckinlde]

Hi all,

my create-react-app is failing and claims this is the issue. This is my output w/npm run build:

$ npm run build

[email protected] build
react-scripts build

Creating an optimized production build...
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

Failed to compile.

Module not found: Error: Package path ./dist/types/utility/type.js is not exported from package /home/ec2-user/spn/node_modules/@testing-library/user-event (see exports field in /home/ec2-user/spn/node_modules/@testing-library/user-event/package.json)

[mckinlde]

and these are my exports in @testing-library:

"exports": {
".": {
"types": "./dist/types/index.d.ts",
"require": "./dist/cjs/index.js",
"default": "./dist/esm/index.js"
},

[mohammad-mghn]

I had the same issue and attempted all the suggested solutions. However, I found the comment tagged as the solution a bit unclear, but it found the solution that works for me.

1. Install TypeScript declarations:

• Run:

npm install --save-dev @types/testing-library__user-event

• This provides TypeScript with the necessary type definitions for @testing-library/user-event.

2. Adjust Your Code:

• Remove

const user = userEvent.setup();

await user.click(/*your code...*/)

• Instead, directly user functions like:

await userEvent.click(/*your code...*/)

And you're good to go. 👋