Persistence

상황 ../../.yarn/cache/keen-slider-npm-6.8.3-1dae0bc90d-b798545bd6.zip/node_modules/keen-slider/react.js:1:74 Module not found: Can't resolve 'react' Did you mean './react'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /Us..

현상 로컬 빌드 시 Module not found 에러가 나면서 깨지는데, 동료들은 깨지지 않았음. 시도해본 것 yarn cache clean & yarn yarn npm login node_modules 삭제 해결 .next 디렉토리를 날리고 yarn 하니까 node_modules가 새로 생성되면서 정상적으로 돌아옴. 해결이 좀 느려진 원인에는 .next 파일이 vscode 디렉토리에서 보이지 않았기 때문. .vscode의 settings.json을 확인해보니, files.exclude 설정에 .next가 포함돼있었다. 팀 전체가 사용하는 설정이라서 별로 들여다보지 않았었다. Toggle Excluded Files라는 vscode 익스텐션을 설치해서 혹시나 안보이는 파일들을 확인하고 싶을 때 쉽게 할 ..

현상 module not loaded TypeError: Cannot read property 'OverView' of undefined at Module../src/views/pages/MyTravelDetail/TravelTabs.tsx A파일에 enum을 정의해놓고 B파일에서 그 enum을 import해서 사용하고, B파일에서 default export한걸 A에서 import하고 있는 상황이었는데, 런타임 모듈 에러가 발생. A파일, B파일 모두 .tsx 파일. 해결 circular module import의 문제일 수 있다는 글을 보아서 A파일의 enum을 B파일로 옮김. 그래서 A파일만 B파일을 import하게 했더니 해결됨. Ref https://stackoverflow.com/question..

현상 CRA with typescript로 만든 프로젝트에서 eslint랑 prettier 설정을 한 상황. 그런데 라이브러리에서 인터페이스를 임포트 하려는데, 그런 건 찾을 수가 없다며 eslint의 import/named 에러가 발생한다. 분명 그 위치에 인터페이스가 존재하는 것도 맞고, vscode도 그걸 인지하고 있는데 왜 eslint가 못찾겠다고 하는지 계속 헤맸다. .eslintignore에 node_modules를 추가 안해서 그런가 했는데 어차피 기본적으로 무시하게 되어 있다고 한다. (https://eslint.org/docs/user-guide/configuring/ignoring-code#the-eslintignore-file) 해결 깃헙 이슈와 스택오버플로우에서 workaround를..

현상 프로젝트가 한 폴더에 두개 존재하는 상황 project1 / package.json project1 / project2 / package.json project1은 라이브러리고, project2는 데모 폴더로 project1이 빌드된 걸 보고 그걸 임포트해서 데모를 띄우는 식. project2의 package.json 내에서 이런 식으로 가져다 씀. 밑에 react랑 react-dom도 중복된 패키지 방지용으로 https://ko.reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react 문서에 나와있는대로 해결한 것. "dependencies": { "@project1": "file:..", "@types/node": "^12.0.0"..

현상 var mySet = new Set(); ['bar', 'baz'].forEach(mySet.add); 이 현상은 꼭 Set이어야 하는 것은 아니고, 콜백 내부에서 this를 사용하고 있는 케이스에서 문제가 된다. forEach문이나 map에는 첫번째 인자로 콜백을 넘겨주고 두 번째인자로 this를 넘겨주도록 되어있는데, 만약 값을 넘겨주지 않으면 두 경우 모두 undefined 로 설정된다. 그러므로 콜백으로 넘겨준 메서드 내에서 this가 사용되고 있는 경우, 참조하는 this가 undefined가 되어 정상적으로 실행되지 않는다. 해결 방법 명시적인 바인딩 var mySet = new Set(); ['bar', 'baz'].forEach(mySet.add.bind(mySet)); Arrow 함..

현상 패키지 매니저는 yarn 사용 중, apollo 버전 ^2.30.1, graphql 버전 ^15.3.0 apollo client로 codegen 하는 스크립트를 실행하였더니, graphql 인스턴스가 중복됐다는 에러가 나온다. Error: Cannot use GraphQLSchema "[object GraphQLSchema]" from another module or realm. Ensure that there is only one instance of "graphql" in the node_modules directory. If different versions of "graphql" are the dependencies of other relied on modules, use "resolutio..

현상 Gradle을 brew로 설치한 후, 설치가 잘 되었나 확인해보려고 gradle -v 을 치니 다음과 같은 에러가 출력됨. ERROR: JAVA_HOME is set to an invalid directory: /usr/local/opt/openjdk/bin/java Please set the JAVA_HOME variable in your environment to match the location of your Java installation. 해결(MacOS) 첫 번째로 자바가 설치되어있는지 확인해봄. java --version 치니 openJDK가 설치되어 있다고 나온다. 두 번째로 자바가 어디 설치돼 있는지 확인해봄. which java 로 자바 위치 확인. JAVA_HOME과 자바 설치 ..

현상 크롬 dev 환경으로 빌드했는데, 해당 에러 페이지가 뜨면서 정상적인 페이지가 노출되지 않음 사파리에서는 정상 작동 크롬 시크릿 모드에서도 정상 작동 콘솔 찍어보니 IndexedDB를 불러오기는 하는데 오브젝트 스토어가 비어있음. 해결 비슷한 사례 존재. cache clear랑 뭔가 관련이 있는 것 같다는 생각. 구글 디벨로퍼 페이지에서 이런 말을 발견 Because of this, it's critically important that you always implement proper error handling in your IndexedDB code. This also means it's generally a good idea to keep application state in memory (i..

An unexpected error occurred: "https://registry.yarnpkg.com/: Not found"](https://github.com/yarnpkg/yarn/issues/5865#) 상황 윈도우 64bit에서 빌딩한 리액트 프로젝트를 깃헙에 올린 후 맥os에 pull하여 사용하려니 특정 패키지에 대한 에러가 남 해결 yarn을 최신버전으로 업데이트하는 것은 yarn self-update이고 yarn upgrade는 패키지를 최신버전으로 업그레이드하는 것임. 나는 babel-preset-env라는 특정 패키지 에러가 났으므로 yarn upgrade를 하였는데 디펜던시가 리빌딩되면서 해결됨.