Jest: "Cannot use import statement outside a module" when importing `use-query-params/adapters/react-router-6`

[marhaupe]

Using use-query-params@2.0.0-rc.0, when importing use-query-params/adapters/react-router-6 in a jest test running with ts-jest and TypeScript's moduleResolution set to node, we see the following error:

Cannot use import statement outside a module

I believe this is because the copy-adapters.js script in use-query-params/scripts does not copy the package.json of the respective adapter. I monkey-patched the node_modules the following way, and it did the trick:

use-query-params/
├─ adapters/
│  ├─ react-router-6/
│  │  ├─ dist/
│  │  │  ├─ index.cjs.js
│  │  │  ├─ index.js
│  │  │  ├─ index.d.ts
│  │  ├─ package.json

I see that you've deliberately excluded the package.json from the copy-adapters script though, so maybe I'm not seeing something:

use-query-params/packages/use-query-params/scripts/copy-adapters.js

Line 37 in 91b4993

if (buildFile !== 'package.json') {

Let me know if you would be open to a pull request

[martdavidson]

No doubt the same issue, but this also happens with the react-router-5 import.

[marhaupe]

Oh yeah definitely, all *-adapter-* directories should be affected.

[marhaupe]

As a workaround, I just renamed the index.cjs.js to index.js and created a patchfile for patch-package. Maybe that could work for you too @martdavidson

[pbeshai]

Oh interesting, I think my bundler is supposed to magically make this work but maybe I need to add some kind of index file in there... also curious if it just auto-works if you renamed index.cjs.js to index.cjs. I'll see if I can reproduce and get the bundler to work

[pbeshai]

Hi @marhaupe, would oyu mind testing if simply putting a package.json file in use-query-params/adapters/react-router-6 with the following contents:

{
  "main": "index.cjs.js",
  "module": "index.js",
  "name": "use-query-params/adapters/react-router-6",
  "types": "index.d.ts"
}

Fixes it?

i.e.

use-query-params/
├─ adapters/
│  ├─ react-router-6/
│  │  ├─ index.cjs.js
│  │  ├─ index.js
│  │  ├─ index.d.ts
│  │  ├─ package.json

[devshop]

Hi @marhaupe, would oyu mind testing if simply putting a package.json file in use-query-params/adapters/react-router-6 with the following contents:

{
  "main": "index.cjs.js",
  "module": "index.js",
  "name": "use-query-params/adapters/react-router-6",
  "types": "index.d.ts"
}

Fixes it?

i.e.

use-query-params/
├─ adapters/
│  ├─ react-router-6/
│  │  ├─ index.cjs.js
│  │  ├─ index.js
│  │  ├─ index.d.ts
│  │  ├─ package.json

@pbeshai I just tried out your fix above and all my unit tests passed.

[pbeshai]

Awesome, thank you! I will push a fix

[pbeshai]

This should be fixed in v2.0.0-rc.1

[marhaupe]

Seconded, works for me too! Thanks for the quick response