10 Oct 2022 to 17 Oct 2022
Summary
- working on Konva react-konva for resume preview
download one repo from GH, display lyric with konva and study
npm install with error
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: lyrictor@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR! react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0-rc.1" from @adobe/react-spectrum@3.16.3
npm ERR! node_modules/@adobe/react-spectrum
npm ERR! @adobe/react-spectrum@"^3.16.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
check stack overflow with suggestions: TODO:backup file first before delete.(just not sure if this delete file will affect my current project? need to check later, by reboot mac and restart project.)
- https://stackoverflow.com/questions/72976149/npm-err-conflicting-peer-dependency-react18-0-0
above dose not solve my issue, install with –legacy-peer-deps instead 这个指令做了什么?? TODO: what –legacy-peer-deps does: short answer is, this ignores the matching issue from dependency, it just install. for future study, check this link
display an async image url to react konva, use one of the react hook. useImage.!! read the url
on Safari browser, there is one bug, need to refresh the web to show the avatar image, solution from konva github url
1
2
3
4
5
6
7
8
function ComplexApp() {
// set crossOrigin of image as second argument, set referrerpolicy as third argument
const [image, status] = useImage(url, "anonymous", "origin");
// status can be "loading", "loaded" or "failed"
return <Image image={image} />;
}
after adding the status check, I am able to use conditional rendering to render the image.
- react hooks and lifecycle