search

react-hookz / web

React hooks done right, for browser and SSR.
https://react-hookz.github.io/web/
MIT License
1.92k stars 93 forks source link

Can't use `useCookieValue` since v24 #1516

Open nagisa-yamato opened 9 months ago

nagisa-yamato commented 9 months ago

Prior Issues

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

What is the current behavior?

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

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

What is the expected behavior?

What should @react-hookz/web be doing?

Environment Details

2snEM6 commented 9 months ago

This is happening to me as well!

xobotyi commented 9 months ago

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 image

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

nagisa-yamato commented 9 months ago

@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 image

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 commented 9 months ago

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 commented 9 months ago

My guesses seems to be correct: https://github.com/stackblitz/core/issues/2944

nagisa-yamato commented 9 months ago

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?