TypeScript does not recognize the .d.ts file of media-query-list-parser

[ttfan240]

Reproduction link

No response

Bug description

Hello, I'm trying to use your library and I have a elementary question.
I'm reading the referrence about tsconfig.json, but I can't solve my problem yet.

Now I just import the library from a project that the runtime module is Node16.

import mediaParser from '@csstools/media-query-list-parser';

The tsconfig.json is set like below. (If I set module "ES2022" and moduleResolution "Bundler", the error disappers.)

{
"compilerOptions": {
	"module": "Node16",
	"moduleResolution": "Node16",
    ...
}

VSCode shows the following error.

Could not find a declaration file for module '@csstools/media-query-list-parser'. 'c:/Users/username/projec-path/node_modules/@csstools/media-query-list-parser/dist/index.cjs' implicitly has an 'any' type.
Try npm i --save-dev @types/csstools__media-query-list-parser if it exists or add a new declaration (.d.ts) file containing declare module '@csstools/media-query-list-parser';ts(7016)

Actual Behavior

No response

Expected Behavior

No response

Can you reproduce it with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

None

npx Output

No response

Extra config

No response

What plugin are you experiencing this issue on?

No response

Plugin version

2.1.9

What OS are you experiencing this on?

Windows

Node Version

20.12.1

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR

[romainmenke]

We do not support typings for commonjs.
If you see this error then you have configured your TypeScript project as commonjs.

See : https://www.typescriptlang.org/docs/handbook/modules/reference.html#module-format-detection

[ttfan240]

What can I do for this problem?
Should I use require and prepare a declaration file for myself?

I think "Node16" also supports ES modules.

Node.js v12 and later accepts both CJS and ES modules, but uses file extensions and package.json files to determine what format each file should be, and throws an error if the file’s contents don’t match the expected format.

https://www.typescriptlang.org/docs/handbook/modules/theory.html#the-module-output-format

[romainmenke]

I don't know how you should fix your problem :)
This is a TypeScript configuration issue in your project.

You can create a GitHub repo with a complete but minimal reproduction.
Then I can give feedback on which change to your configuration might help.

---

In the abstract you have to instruct TypeScript that you are writing esm and want to output esm.

If that is setup correctly TypeScript will find the esm types for @csstools/media-query-list-parser

[ttfan240]

I prepared a repository here.

I verified and found that "strict": true is required to reproduce this.
And type checking is executed by ESLint inside VSCode (built-in ESLint).

Could you please take a look and see if you can reproduce the problem on your end? Thanks!

[romainmenke]

Hi @ttfan240,

You need to specify "type": "module", in your package.json or use .mts as your file extension for your TypeScript files.

This is explained in that first link I posted :)

See : https://www.typescriptlang.org/docs/handbook/modules/reference.html#module-format-detection

[ttfan240]

Thanks, the error is solved!

If I add "type": module or change the extension to .mts and only reopen the VSCode, the error still persists.
However, it changed after I executed npm run compile.

Now the error message is below:

Module '"c:/Users/username/project-path/mql-parser-import-issue/node_modules/@csstools/media-query-list-parser/dist/index"' has no default export.ts(1192)

Is it not possible to import without {}?
The following code shows no error.

import { parse } from '@csstools/media-query-list-parser';

[romainmenke]

There isn't any default export in this package.
Default exports aren't a required feature for a package to provide.

Just use the regular, non-default exports :)

[ttfan240]

Sure, thanks again for everything!