Can't use useCookieValue since v24

[nagisa-yamato]

Prior Issues

Are there any existing issues or PRs that relate to this problem? If so, link them here.

• useCookieValue esm & esnext imports don't work #659

What is the current behavior?

What does @react-hookz/web do right now.

• Can not import useCookieValue

Steps to Reproduce

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://codesandbox.io or similar.

1. Try to import { useCookieValue } from "@react-hookz/web"
   • I've tried the import paths below

// Module '"@react-hookz/web"' has no exported member 'useCookieValue'.(2305)
import { useCookieValue } from '@react-hookz/web';
// Cannot find module '@react-hookz/web/useCookieValue/index.js' or its corresponding type declarations.(2307)
import { useCookieValue } from '@react-hookz/web/useCookieValue/index.js';
// Cannot find module '@react-hookz/web/esm/useCookieValue' or its corresponding type declarations.(2307)
import { useCookieValue } from '@react-hookz/web/esm/useCookieValue';

Demo

• https://stackblitz.com/edit/stackblitz-starters-x6httv?file=src%2FApp.tsx

What is the expected behavior?

What should @react-hookz/web be doing?

• Import for useCookieValue is working, or docs are updated to show the correct import path
  • https://react-hookz.github.io/web/?path=/docs/side-effect-usecookievalue--example#importing

Environment Details

• @react-hookz/web version: 24.0.4
• react version: 18.2.0
• react-dom version: 18.2.0
• typescript version: StackBlitz -> react-scripts ?
• OS: StackBlitz
• Browser: StackBlitz
• Did this work in previous versions?
  • works on v23

[2snEM6]

This is happening to me as well!

[xobotyi]

Documentation page is currently broken, thus havent been updated, it is true.

I dont know whats the matter with stackblitz and why it complains about non-existent issue with typescript.
My IDE (phpstorm) with TS 5.3.3 dont see any issue in import

Moreover stackblitz despite having import underlined perfectly compiles everything🤔 https://stackblitz.com/edit/stackblitz-starters-lfd8ma?file=src%2FApp.tsx

[nagisa-yamato]

@xobotyi

Documentation page is currently broken, thus havent been updated, it is true.

I dont know whats the matter with stackblitz and why it complains about non-existent issue with typescript. My IDE (phpstorm) with TS 5.3.3 dont see any issue in import

Moreover stackblitz despite having import underlined perfectly compiles everything🤔 https://stackblitz.com/edit/stackblitz-starters-lfd8ma?file=src%2FApp.tsx

I've confirmed my project compiles by using the import path examples mentioned in the v24.0.0 release notes, e.g.

import { useCookieValue } from "@react-hookz/web/useCookieValue";
import { useResizeObserver } from "@react-hookz/web/useResizeObserver";
import { useIntersectionObserver } from "@react-hookz/web/useIntersectionObserver";
import { useUnmountEffect } from "@react-hookz/web/useUnmountEffect";
import { useTimeoutEffect } from "@react-hookz/web/useTimeoutEffect";

(I'm specifying individual directories since my project uses Next.js, and it has unusual tree-shaking conventions which I do not wish to use right now)

However, I still get TypeScript errors like Cannot find module '@react-hookz/web/useUnmountEffect' or its corresponding type declarations.

So this might not be an issue with useCookieValue, but more of a TypeScript issue.
Should I use // @ts-ignore as a workaround?

[xobotyi]

Since typescript handles everything fine, but IDE not - i suspect that stackblitz (and codesandbox, as figures) has different, older version of typescript used for IDE purposes (same as vscode has own internal version of typescript used for language server purposes). Presumably it worth of creating bugreport there (stackblitz/codesandbox)🤔
ts-ignore will silence your IDE but it will also silence any possible future errors for actual compiler which is.. well.. debatable overall but is a temporal solution hat will work.

[xobotyi]

My guesses seems to be correct: stackblitz/core#2944

[nagisa-yamato]

I've created 2 repositories, which both result in dev-server/build errors.

Fork of the StackBlitz demo above, with updated TypeScript dependencies

running start script

Compiled successfully!

You can now view stackblitz-starters-x6httv in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.205:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
ERROR in src/App.tsx:8:32
TS2307: Cannot find module '@react-hookz/web/useCookieValue' or its corresponding type declarations.
     6 | // import { useCookieValue } from '@react-hookz/web/esm/useCookieValue';
     7 | // Cannot find module '@react-hookz/web/useCookieValue/index.js' or its corresponding type declarations.(2307)
  >  8 | import { useCookieValue } from "@react-hookz/web/useCookieValue";
       |                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     9 |
    10 | export const App: FC<{ name: string }> = ({ name }) => {
    11 |   const [cookie] = useCookieValue("foo");

running build script

❯ pn build

> stackblitz-starters-x6httv@0.0.0 build /Users/shogo-yamato/learn/stackblitz-starters-x6httv
> react-scripts build

Creating an optimized production build...
Failed to compile.

TS2307: Cannot find module '@react-hookz/web/useCookieValue' or its corresponding type declarations.
     6 | // import { useCookieValue } from '@react-hookz/web/esm/useCookieValue';
     7 | // Cannot find module '@react-hookz/web/useCookieValue/index.js' or its corresponding type declarations.(2307)
  >  8 | import { useCookieValue } from "@react-hookz/web/useCookieValue";
       |                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     9 |
    10 | export const App: FC<{ name: string }> = ({ name }) => {
    11 |   const [cookie] = useCookieValue("foo");


 ELIFECYCLE  Command failed with exit code 1.

TypeScript version

❯ pn list -r typescript
Legend: production dependency, optional only, dev only

stackblitz-starters-x6httv@0.0.0 /Users/shogo-yamato/learn/stackblitz-starters-x6httv

devDependencies:
typescript 5.3.3

Vite with react-ts template

(scaffolded with https://vitejs.dev/guide/#scaffolding-your-first-vite-project)

running dev script

❯ pn dev

> react-hookz-1516-vite@0.0.0 dev /Users/shogo-yamato/learn/react-hookz-1516-vite
> vite


  VITE v5.1.3  ready in 153 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
3:41:18 PM [vite] Pre-transform error: Failed to resolve import "@react-hookz/web/useCookieValue" from "src/App.tsx". Does the file exist?
3:41:18 PM [vite] Internal server error: Failed to resolve import "@react-hookz/web/useCookieValue" from "src/App.tsx". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/shogo-yamato/learn/react-hookz-1516-vite/src/App.tsx:1:64
  16 |  }
  17 |  var _s = $RefreshSig$();
  18 |  import { useCookieValue } from "@react-hookz/web/useCookieValue";
     |                                  ^
  19 |  import { useState } from "react";
  20 |  import "./App.css";
      at formatError (file:///Users/shogo-yamato/learn/react-hookz-1516-vite/node_modules/.pnpm/vite@5.1.3/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:50500:46)
      at TransformContext.error (file:///Users/shogo-yamato/learn/react-hookz-1516-vite/node_modules/.pnpm/vite@5.1.3/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:50494:19)
      at normalizeUrl (file:///Users/shogo-yamato/learn/react-hookz-1516-vite/node_modules/.pnpm/vite@5.1.3/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:65562:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///Users/shogo-yamato/learn/react-hookz-1516-vite/node_modules/.pnpm/vite@5.1.3/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:65717:47
      at async Promise.all (index 3)
      at async TransformContext.transform (file:///Users/shogo-yamato/learn/react-hookz-1516-vite/node_modules/.pnpm/vite@5.1.3/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:65638:13)
      at async Object.transform (file:///Users/shogo-yamato/learn/react-hookz-1516-vite/node_modules/.pnpm/vite@5.1.3/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:50809:30)
      at async loadAndTransform (file:///Users/shogo-yamato/learn/react-hookz-1516-vite/node_modules/.pnpm/vite@5.1.3/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:53582:29)
      at async viteTransformMiddleware (file:///Users/shogo-yamato/learn/react-hookz-1516-vite/node_modules/.pnpm/vite@5.1.3/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:63377:32)

running build script

❯ pn build

> react-hookz-1516-vite@0.0.0 build /Users/shogo-yamato/learn/react-hookz-1516-vite
> tsc && vite build

src/App.tsx:1:32 - error TS2307: Cannot find module '@react-hookz/web/useCookieValue' or its corresponding type declarations.

1 import { useCookieValue } from "@react-hookz/web/useCookieValue";
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in src/App.tsx:1

 ELIFECYCLE  Command failed with exit code 2.

TypeScript version

❯ pn list -r typescript
Legend: production dependency, optional only, dev only

react-hookz-1516-vite@0.0.0 /Users/shogo-yamato/learn/react-hookz-1516-vite

devDependencies:
typescript 5.3.3

---

Also, I have settings enabled on my editor to use the TypeScript version installed in my project instead of the one shipped with the editor: https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript

Is this still an IDE issue?