ESM imports with query parameters | TypeScript Community | Page 1

sudden folio Sep 25, 2024, 4:28 PM

#

Hello, I'm trying to use ESM style relative file imports with query parameters in my code. I've read through the Modules Reference which suggests "The TypeScript compiler recognizes standard ECMAScript module syntax in TypeScript" and I didn't find any explicit mention of query parameters in imports not being supported. But I haven't been able to find a set of configuration options that seem to make it work.

For example my code looks like:

// @filename: dep.ts
export const f = () => {console.log("hi")};

// @filename: entry.ts
import { f } from "./dep.js?query=value";
f();

I'm using target: ESNext, module/moduleResolution: NodeNext. Attempting to compile errors with: entry.ts:1:19 - error TS2307: Cannot find module './dep.js?query=what' or its corresponding type declarations.. Renaming the files to .js and running directly with node does succeed. It seems like Typescript isn't fully modeling node's resolution in this situation. Is that expected?

Documentation - Modules - Reference

Module syntax and compiler options reference

ember sparrow Sep 25, 2024, 5:50 PM

#

sudden folio Hello, I'm trying to use ESM style relative file imports with query parameters i...

Umm... You import from a file, so just give the filename in the import
import { f } from "./dep.js"
I'm not sure what you are trying to do with query parameters

sudden folio Sep 25, 2024, 6:09 PM

#

There are some contrived examples of why you might want to do this here: https://flaming.codes/posts/es6-import-with-parameters/

flaming.codes

How to pass parameters to an ES6 module when importing it

Using the Javascript ES6-module-system, you pass parameters to your imports

ember sparrow Sep 25, 2024, 6:49 PM

#

I see
Not familiar with this type of usage, but I managed to find this
https://dev.to/lioness100/adding-url-search-parameters-to-imports-1kd8

DEV Community

Adding URL Search Parameters to Imports!

Here's an interesting bit of knowledge: did you know that you can create and interpret relative file...

#

And a comment under this article:

#

#

Could you try if this works for you

#

@sudden folio

sudden folio Sep 25, 2024, 6:51 PM

#

Ah that works but it's pretty annoying since I have to list out every potential query param and value (and combination of multiple params).

ember sparrow Sep 25, 2024, 6:52 PM

#

You can update the path mapping according to your needs
Something like this:

#

"paths": {
  "./*?*": "./*"
}

Not even sure if it is the right syntax 😅

#

On second thought, this might not work because of the use of 2 wildcards

#ESM imports with query parameters