Can't use `useCookieValue` since v24 #1516

nagisa-yamato · 2024-02-07T07:28:15Z

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.

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

The text was updated successfully, but these errors were encountered:

2snEM6 · 2024-02-09T08:02:44Z

This is happening to me as well!

xobotyi · 2024-02-09T09:20:29Z

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 · 2024-02-13T04:11:49Z

@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 · 2024-02-14T14:01:29Z

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 · 2024-02-14T14:05:26Z

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

nagisa-yamato · 2024-02-16T06:55:37Z

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

> [email protected] 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

[email protected] /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

> [email protected] 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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:63377:32)

running `build` script

❯ pn build

> [email protected] 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

[email protected] /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?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't use `useCookieValue` since v24 #1516

Can't use `useCookieValue` since v24 #1516

nagisa-yamato commented Feb 7, 2024

2snEM6 commented Feb 9, 2024

xobotyi commented Feb 9, 2024 •

edited

Loading

nagisa-yamato commented Feb 13, 2024

xobotyi commented Feb 14, 2024

xobotyi commented Feb 14, 2024

nagisa-yamato commented Feb 16, 2024

Can't use useCookieValue since v24 #1516

Can't use useCookieValue since v24 #1516

Comments

nagisa-yamato commented Feb 7, 2024

Prior Issues

What is the current behavior?

Steps to Reproduce

Demo

What is the expected behavior?

Environment Details

2snEM6 commented Feb 9, 2024

xobotyi commented Feb 9, 2024 • edited Loading

nagisa-yamato commented Feb 13, 2024

xobotyi commented Feb 14, 2024

xobotyi commented Feb 14, 2024

nagisa-yamato commented Feb 16, 2024

Fork of the StackBlitz demo above, with updated TypeScript dependencies

running start script

running build script

TypeScript version

Vite with react-ts template

running dev script

running build script

TypeScript version

Can't use `useCookieValue` since v24 #1516

Can't use `useCookieValue` since v24 #1516

xobotyi commented Feb 9, 2024 •

edited

Loading

running `start` script

running `build` script

running `dev` script

running `build` script