CodeHoon

안녕하세요 상훈입니다.

React.js 에서 Switch 를 사용하려고 하는데 아래와 같은 에러가 발생하였습니다.

ERROR in ./src/App.js 20:37-43 export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams) 

에러의 원인은 React의 버전이 올라가면서 Switch 가 Routes 로 변경되었다고 합니다.

사용 방법은 똑같으니, Switch로 작성하셨던 부분을 Routes로 변경해주시면 됩니다.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

react-router-dom 의 기능에서도 Switch 대신에 Routes를 작성해주시면 됩니다.

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

npm 관련한 명령어를 실행할 때마다 아래와 같은 에러가 발생하였다.

npm WARN logfile Error: EPERM: operation not permitted, unlink 'C:\Users\AppData\Local\npm-cache\_logs\2022-02-25T02_50_32_498Z-debug-0.log' npm WARN logfile error removing log file C:/Users/AppData/Local/npm-cache/_logs/2022-02-25T02_50_32_498Z-debug-0.log [Error: EPERM: operation not permitted, unlink 'C:\Users\AppData\Local\npm-cache\_logs\2022-02-25T02_50_32_498Z-debug-0.log'] { npm WARN logfile errno: -4048, npm WARN logfile code: 'EPERM', npm WARN logfile syscall: 'unlink', npm WARN logfile path: 'C:\\Users AppData\\Local\\npm-cache\\_logs\\2022-02-25T02_50_32_498Z-debug-0.log' npm WARN logfile }

unlink 관련하여 에러 내용인 것 같은데, 도대체 왜 저러는지 이해가 안됐었다. 😂

1. 설치단계에서는 warn 만 있고, error 로 인한 멈추는 현상은 이루어지지 않았다는 점.
2. 실행단계에서는 멈춘다는 점
3. cache 정리를 해봐도 잘 안됐다는 점... 등

그래서 내가 무엇을 했는지 생각해보았고, 문득 생각난 package.json.script 부분을 변경하였던 것이 생각나 해당 부분을 주석처리하고 재실행하였더니, warn 등의 로그들이 출력되지 않았다.

install 부분과 run · start ... 실행 부분에 또 똑같은 에러가 출력되었는데,

그냥 npm을 repair 하였다. 그랬더니 자연스럽게 잘 실행됨.

지금 다시 생각해보면 링크가 꼬였다 혹은 끊어졌다가 어울리지 않을까 싶다.

안녕하십니까 상훈입니다. 

Vue.js 3, Vite를 이용하여 해당 프로젝트를 실행시키는데 아래와 같은 에러가 발생하였습니다.

해결방법

main.js 에 작성하였던 history: createWebHistory 부분 때문에 에러가 발생한 것 입니다.

createWebHistory 를 사용하기 위해 import를 하셨을 겁니다. 그런데, createWebHistory 는 함수로 작성해야합니다.

해당 에러가 사라지게 됩니다.

"도움이 되셨다면 광고 한 번 클릭해주세요. 블로그 운영에 힘이 됩니다. 감사합니다.

참고

사용환경 : window10, node-v: 16.14.0, npm-v: 8.2.0, Vue.js(React.js, Angular) 

Vue.js의 프로젝트를 vue-cli를 통해서 설치하려는데 node-sass 관련하여 자꾸 오류가 났다.

node-sass 버전과 node 가 지원하는 버전간의 오류라고 한 블로그에서 확인하였지만, 버전은 잘 맞췄었다.

해결방법을 찾고 또 찾아 여러 가지 방법을 시도해보았다.

1. npm cache 정리
2. npm verify
3. node uninstall & install 
...

그리고 마지막에 와서야 dart-sass로 설치하였다. (이래도 되냐...ㅠ)

그런데 npm에서 node-sass를 검색하던 와중에 대문짝만하게 아래와 같은 내용이 작성되어져 있었는데, 간략하게 줄여보자면, 
" LibSass 및 Node Sass는 유지 보수는 무한적으로 유지할 것이지만 더 이상 사용되지 않습니다. 새로운 CSS나 Sass 기능에 추가 기능이나 호환성을 추가할 계획도 없다. 여전히 그것을 사용하는 프로젝트는 dart-sass로 옮겨야 한다." 라는 것이었다.

왜지..? 오늘에서야 이 글을 보긴하지만..

그리고 이제 다시 프로젝트를 설치해보았다.

성공하였는데 너무 찜찜하다.

에러 문구

npm ERR! code 1
npm ERR! path D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js npm ERR! Building: C:\Program Files\nodejs\node.exe D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library= npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli 'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli 'D:\\Vueproject\\Vue\\ip-addr-tracker\\app\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.14.0 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) npm ERR! gyp verb `which` failed python2 Error: not found: python2 npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) { npm ERR! gyp verb `which` failed code: 'ENOENT' npm ERR! gyp verb `which` failed } npm ERR! gyp verb check python checking for Python executable "python" in the PATH npm ERR! gyp verb `which` failed Error: not found: python npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) npm ERR! gyp verb `which` failed python Error: not found: python npm ERR! gyp verb `which` failed at getNotFoundError (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:13:12) npm ERR! gyp verb `which` failed at F (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:68:19) npm ERR! gyp verb `which` failed at E (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:80:29) npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\which\which.js:89:16 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\index.js:42:5 npm ERR! gyp verb `which` failed at D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\isexe\windows.js:36:5 npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:198:21) { npm ERR! gyp verb `which` failed code: 'ENOENT' npm ERR! gyp verb `which` failed } npm ERR! gyp verb could not find "python". checking python launcher npm ERR! gyp verb could not find "python". guessing location npm ERR! gyp verb ensuring that file exists: C:\Python27\python.exe npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable. npm ERR! gyp ERR! stack at PythonFinder.failNoPython (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-gyp\lib\configure.js:484:19) npm ERR! gyp ERR! stack at PythonFinder. (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-gyp\lib\configure.js:509:16) npm ERR! gyp ERR! stack at callback (D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\graceful-fs\polyfills.js:299:20) npm ERR! gyp ERR! stack at FSReqCallback.oncomplete (node:fs:198:21) npm ERR! gyp ERR! System Windows_NT 10.0.19044 npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\Vueproject\\Vue\\ip-addr-tracker\\app\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" npm ERR! gyp ERR! cwd D:\Vueproject\Vue\ip-addr-tracker\app\node_modules\node-sass npm ERR! gyp ERR! node -v v16.14.0 npm ERR! gyp ERR! node-gyp -v v3.8.0 npm ERR! gyp ERR! not ok npm ERR! Build failed with error code: 1 npm ERR! A complete log of this run can be found in:

vue.js 3, vue-cli 4.5.x 버전에서 tailwind css 를 설치하려고하는데 에러가 발생하였다.

지난 포스팅에서는 아직 tailwindcss가 vue3에 맞춰서 나오지 않았기에 에러가 났지만, 지금은 출시가 되었다.

그런데 에러라니!?

그래서 해결책을 찾아왔다.

core-js, vue, vue-cli 의 버전이 최신이 아니었기에 오류가 발생하였다.

그래서 각각 버전을 모두 최신화 하였고, 정상적으로 설치가 되었다.

최신화: core-js, vue, vue-cli

npm install --save core-js@^3
npm install vue@next
vue upgrade --next

아무래도 얼마전에 tailwind.css 가 최신화가 된만큼, node, core-js, vue 등의 버전도 가장 최신으로 올려야  알맞게 설치가 된다.

그리고 다시 tailwindcss 설치

npm install -D tailwindcss postcss autoprefixer

■ 결과 확인

가장 중요한 결과 확인 작업이 남았다. 기본 default css 설정 후, class를 입력해보았다.

해당 웹사이트 공유

에러 해결은 역시 stackoverflow

- Vue-cli 4.5 를 사용하고있습니다.

vue.config.js에서 scss, sass를 지정해주려는 가운데, appendData 에 대한 에러가 발생하였을 때 적용하여 해결하였습니다.

appendData -> additionalData

로 변경해주었습니다.

Vue.js 프로젝트를 webpack을 이용해 

npm run build

를 하였을 때 나타나는 경고 문구

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack.config.js 에 어떤 모드로 프로젝트를 설정한것인지 기재를 안해놓았기 때문이다.

그렇기에 mode: 'production'  혹은 'development' 를 추가해주면 된다.

Vue-cli 프로젝트를 만들 때 ESLint 옵션을 standard로 설정하고 생성하였다. 

그런데 순조롭게 코드를 작성하고 있던 와중, 딱히 코드 자체에 문제가 없어보이는데 저런 에러가 출력되면서 --fix만 사용하란다. 

■ 해결방법

npm run --fix

2022.12.12. 수정
 - npm run lint -- --fix 로 해야지 됩니다. 
위의 코드는 제가 script에 해당 내용을 미리 작성해서 되는것이었습니다. 참고바랍니다.

npm run lint -- --fix

해당 명령어를 bash에서 입력했을 때 

순조롭게 되었다.

예전에는 이게 뭐야? ㅡㅡ 하면서 지나갔던 내용인데 뭔가 오기가 생긴건지 결벽증이 생긴건지 이런 것 하나하나 신경쓰게 되었다.