Open nagisa-yamato opened 7 months ago
This is happening to me as well!
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
@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?
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.
My guesses seems to be correct: https://github.com/stackblitz/core/issues/2944
I've created 2 repositories, which both result in dev-server/build errors.
start
scriptCompiled 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");
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.
❯ 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
(scaffolded with https://vitejs.dev/guide/#scaffolding-your-first-vite-project)
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)
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.
❯ 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?
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.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.
import { useCookieValue } from "@react-hookz/web"
Demo
What is the expected behavior?
What should
@react-hookz/web
be doing?useCookieValue
is working, or docs are updated to show the correct import pathEnvironment Details
@react-hookz/web
version: 24.0.4react
version: 18.2.0react-dom
version: 18.2.0typescript
version:StackBlitz
->react-scripts
?StackBlitz
StackBlitz