ERROR in ./src/App.js 21:78-87
export 'default' (imported as 'jwtDecode') was not found in 'jwt-decode' (possible exports: InvalidTokenError, jwtDecode)
ERROR in ./src/App.js 41:14-23
export 'default' (imported as 'jwtDecode') was not found in 'jwt-decode' (possible exports: InvalidTokenError, jwtDecode)
ERROR in ./src/App.js 98:14-23
export 'default' (imported as 'jwtDecode') was not found in 'jwt-decode' (possible exports: InvalidTokenError, jwtDecode)#/app.js
import React from "react";
import jwtDecode from 'jwt-decode';
import { createContext, useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Login from "./components/LoginFrame";
import Register from './components/Register';
import Test from './Test.js';
export const AuthContext = createContext(); // Context 생성
function App() {
const [authTokens, setAuthTokens] = useState(() =>
localStorage.getItem("authTokens")
? JSON.parse(localStorage.getItem("authTokens"))
: null
); // localStorage에 authTokens이 있을 경우 가져와서 authTokens에 넣는다.
const [user, setUser] = useState(() =>
localStorage.getItem("authTokens")
? jwtDecode(localStorage.getItem("authTokens"))
: null
); // localStorage에 authTokens이 있을 경우 jwt_decode로 authTokens를 decode해서 user 정보에 넣는다.
const [loading, setLoading] = useState(true);
(이하생략)만들어 놓았던 프로젝트가 실행이 안된다?
- API에서 준 로그인 토큰은 jwt 방식으로 encode 되어있음.
- 이를 decode 해주는 장치가 jwt-decode 모듈.
- 분명 4달전에 되던 jwt-decode code가 실행이 안됐음. 왜?
항상 되던게 안되면 업데이트 관련 이슈를 확인한다.
알고보니 3일 전에 jwt-decode가 4.0.0으로 업데이트를 하셨었다.
일단 직전 버전인 3.1.2로 다운그레이드 해줌.
다운그레이드 해주니 잘 작동하는 모습을 보임.
하지만..
임시 방편인데, 그럼 4.0.0은 영원히 사용 못하는건가?
항상 이슈를 주먹구구식으로 막지 말자!
***3.1.2***
import jwt_decode from "jwt-decode";
var token = "eyJ0eXAiO.../// jwt token";
var decoded = jwt_decode(token);
console.log(decoded);
/* prints:
* { foo: "bar",
* exp: 1393286893,
* iat: 1393268893 }
*/
// decode header by passing in options (useful for when you need `kid` to verify a JWT):
var decodedHeader = jwt_decode(token, { header: true });
console.log(decodedHeader);
/* prints:
* { typ: "JWT",
* alg: "HS256" }
*/
***4.0.0***
import { jwtDecode } from "jwt-decode";
const token = "eyJ0eXAiO.../// jwt token";
const decoded = jwtDecode(token);
console.log(decoded);
/* prints:
* {
* foo: "bar",
* exp: 1393286893,
* iat: 1393268893
* }
*/
// decode header by passing in options (useful for when you need `kid` to verify a JWT):
const decodedHeader = jwtDecode(token, { header: true });
console.log(decodedHeader);
/* prints:
* {
* typ: "JWT",
* alg: "HS256"
* }
*/업데이트 되면서 import 방식에 변화가 생겼다.
3.1.2 : import jwt_decode from "jwt-decode";
4.0.0 : import {jwtdecode} from "jwt-decode";
본래 코드에서 저렇게 { }중괄호를 붙여주면 v4.0.0에서도 오류 없이 잘 실행된다.
리와인드 1. 중괄호의 의미
사실 이 오류를 해결하기전에, 중괄호의 의미를 명확히 알고 있었다면 쉽게 해결할 수 있었다.
import A from B
import {A} from C
두 코드의 차이점은 보내주는 export 방식의 차이라고 한다.
모듈을 배포 하기 위해서는 export라는 것을 명시적으로 써줘야 한다. 보통 컴포넌트 맨 마지막 줄에 export default A 라고 해주는 것이 그 예이다.
근데 여기서 default가 붙으면 중괄호를 붙이지 않아도 되지만, default 없이 export를 하게 되면 중괄호에 담아서 import 를 해줘야 한다고 한다.
오류에서 계속 default를 찾던 이유도 이때문이였다. (import가 계속 default 형태의 export만 찾고 있었기 때문)
리와인드 2. 공식 문서의 중요성
사실 이 오류를 해결하기 전까지는 npm으로 불러오는 모듈에 대해 공식문서를 찾아보는 습관은 없었다. 무조건 다른 사람의 블로그 글이나 stackoverflow 와 같은 질의응답에서 답을 찾았었는데, 제일 우선적으로 익혀야 하는 것이 공식 문서임을 알게 되었다.
공식 문서 숙지를 생활화하자.
fin
