数年動いている Create React App で作った React v17 で動いているアプリをバージョンアップしてみました
package.json の記載で比較すると
npm i
npm run startで、ブラウザ上でエラー発生
Uncaught ReferenceError: process is not defined
at ./node_modules/jsonwebtoken/lib/psSupported.js (psSupported.js:3:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/jsonwebtoken/verify.js (verify.js:6:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/jsonwebtoken/index.js (index.js:3:1)
at options.factory (react refresh:6:1)Webpack が 4 -> 5 になっており、サーバーサイド用の Polyfills が消されたりがある様子
Automatic Node.js Polyfills Removed · Issue #11282 · webpack/webpack
jsonwebtoken がサーバーサイドで動かすものだったみたいで、クライアントサイドで動かすべきではないそう
使っていた箇所は
jwt.decode(token, { complete: true })だけだったので
function jwtDecode(t) {
let token = {}
token.raw = t
token.header = JSON.parse(window.atob(t.split('.')[0]))
token.payload = JSON.parse(window.atob(t.split('.')[1]))
return token
}
jwtDecode(token)で置き換えました
参考リンク https://stackoverflow.com/a/47115113
他を疑い時間がかかりました