pbeshai / use-query-params

React Hook for managing state in URL query parameters with easy serialization.

Home Page:https://pbeshai.github.io/use-query-params

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

marhaupe opened this issue · comments

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:

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

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

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

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

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

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

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

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.

Awesome, thank you! I will push a fix

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

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