//tips
//smart contract
Vercel読み込みで下記のようにエラーが発生しているので[id]のpathの設定かと思ったらvercel/path0/pages/なので単純にvercel上でmoduleの読み込みができないため生じるものであることがわかってきた。
/pages/ID/[id].js
Module not found: Can't resolve '../../components/Notecard' in '/vercel/path0/pages/ID'
では、なぜvercel上で読み込めなくなるのかを確認していく。
同様の事象が起こっている先達を確認。
https://stackoverflow.com/questions/68746039/next-js-build-on-vercel-failed-module-not-found
https://stackoverflow.com/questions/65651791/modulenotfounderror-module-not-found-error-cant-resolve-components-chart
https://github.com/vercel/next.js/discussions/16179
なかなか探しても解決策が見つからずvercelのエラー説明のところにいった。
Missing Build Scriptの中にpackage.jsonのscript部分にbuildを組み込むといいかもしれないとのことが書かれてあったので実行。
"scripts": {
"build": "[my-framework] build --output public"
}
https://vercel.com/docs/errors
"build": "next build”から上記のものに書き換え。
git remote rm origin
git reset --hard origin/master
rm -rf .git/
これらで初期化。
新たなレポジトリにアップロード。
git init
git add .
git commit -m "first “
git remote add origin https://github.com/
GIT_TRACE=1 GIT_CURL_VERBOSE=1 git push -u origin main
Githubへのアップロードの途中で止まってしまいターミナルが動かなくなる。
これはwifiの影響なのか。
再度トライ。今度は
git config --global init.defaultBranch main
も加える。
きちんと実現できた。
やはりネットワーク状況の影響かもしれない。githubへのアップロード時には他の動作中のアプリなどは全部閉じることにする。
今度はsh: [my-framework]: command not foundのエラーが発生。
Vercelにサポート依頼。３から５営業日かかるとのこと。
Hi,I'm new to Vercel and this is first time to use.I try to deploy several times on Vercel by connecting my github project.But doesn't work.
First time I got below error.
/pages/ID/[id].js
Module not found: Can't resolve '../../components/Notecard' in '/vercel/path0/pages/ID'
So I researched and I tried to set "[my-framework] build --output public" in my package.json.
"scripts": {
"build": "[my-framework] build --output public"
}
However,I got new below error and I couldn't find this solution.
sh: [my-framework]: command not found
Could you show me how to solve these problems.Thanks.
これは知っていないとハマる系かもしれない。
Githubの追加アップもなぜかできないので整理のついでにそこも練習してみる。
git remote rm origin
git reset --hard origin/master
rm -rf .git/
git init
git config --global init.defaultBranch main
git add .
git commit -m "first “
git remote add origin https://github.com/
GIT_TRACE=1 GIT_CURL_VERBOSE=1 git push -u origin main
ターミナルで止まる箇所としてはローカルから
Writing objects: 100% (3/3), 5.61 KiB | 0 bytes/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (3/3), done.
14:12:24.034410 http.c:756 == Info: Connection #0 to host github.com left intact
などのremote部分での処理なのでネットワーク部分での影響を受けるよう。wifi切り替えで対応できた。
Indexにコメントアウトを一部テストように挿入して追加アップロード。
git remote add origin https://github.com/
git branch -M main
git push -u origin main
すでに変更は対応済みとなり、変更点はアップロードされない。
git add .
git commit -m “second commit“
git remote add origin gitのurl
git push -u origin main
とすることで無事に変更点は反映された。一人でやってるとgithubをあまり使わないので忘れてしまう。定期的に触るようにせねば。pullする必要もないので使っているとはいえないかもしれないが。
ログインしていない状態でfollowボタンを押すと、
Uncaught (in promise) ReferenceError: authhistory is not defined
のエラーが出てしまったのでその場合はログイン・サインアップページに飛ばすようにする。
飛ばせるページを作成する。
基本的にはindex.jsの構造と同じで良い。
export default function Login() {
http://localhost:3000/loginをシンプルに作成。Please Login or Signup Firstの記載とボタンのみ表示。
エラーが出た下記のイベント関数handleOnArrayfollowの分岐を追加する。
<Button variant="outlined" onClick={handleOnArrayfollow}>+ FOLLOW</Button>
イベント関数の中のauthhistoryが設定されていない場合は下記部分が対応できないので初期の段階でその可能性は弾く。
const q = await query(colRef,where("mail","==",authhistory))
handleOnArrayfollow(e)の大元の中身をif(authhistory){の中に入れ、elseで
router.push("/login")
とする。
変更後もまだエラーが出ている。
[id].js?63c9:816 Uncaught (in promise) ReferenceError: authhistory is not defined
何かと思ったらusestateでもconstでも定義されていなく、他のところでは直接localStorage.getItem('authhistory’)でgetしていた。
念の為const authhistory= localStorage.getItem('authhistory’)を加え、if(localStorage.getItem('authhistory’)){で様子をみる。
きちんとloginフォームに飛ばず、そのままデータベースへの登録にまで進みエラーとなるので、
でバックログでauthhistoryの中身を確認。
なんとログインしていた。
Updatedocができない要因は別にあった。importに追加。
import { collection, getDocs,getDoc, query, where,onSnapshot,orderBy,serverTimestamp,updateDoc } from "firebase/firestore"
ログイン済みの場合は問題クリア。一旦ログアウトして、ログインしていない場合の挙動を確認していく。
ログアウト時にauthhistoryもリセットできるようにする。
ログアウト部分にlocalStorage.setItem('authhistory’,’’)を追加。
async function handleOnAuthOut(e) {
e.preventDefault();
console.log('out')
localStorage.setItem('authhistory','')
signOut(auth)
.then(()=>{
//console.log('signed out')
console.log(localStorage.getItem('authhistory'))
})
}
きちんとログインしていない場合の遷移を確認できた。
文字が黒だとキツく感じたのでパレットで変更。
https://www.muicss.com/docs/v1/getting-started/colors
Layoutでのmypage遷移ボタンでの処理も同時に行う。ここではauthuseridで認識しているので、logout時にここも打ち消す処理を追加。
const myid=localStorage.getItem('authuserid')
localStorage.setItem('authuserid','')
もしauthuseridが空だとmyidも空になり、IDページに遷移するのでここをもしmyidが存在すればに分岐させる。
if(text==='MyPage'){
const myid=localStorage.getItem('authuserid')
console.log(myid)
router.push("/ID/"+myid)
}
このようにした。
if(text==='MyPage'){
const myid=localStorage.getItem('authuserid')
console.log(myid)
if(myid){
router.push("/ID/"+myid)
}else{
router.push("/login")
}
きちんと機能した。
IDページは登録者全員をリストアップする形にするか。要検討。
[id]ページのカードの下部にeditが表示されてしまっているので、ここは表示させないよう修正。
Editの場合のみ渡される引数の存在で分岐させる。
{handleDelete
?
<CardActions>
<Button onClick={()=>handleflagchange(note.docid)} size="small">edit</Button>
</CardActions>
:
<div></div>
}
オッケー。きちんと機能した。
Editにダイレクトにurlから入ろうとするとまだ入れてしまう。再度ログアウトしてからトライするも同じ結果。
Editの該当スクリプトを確認。これは皆がauthhistoryを持っている前提にしているから起こる事象のよう。 if (authhistory) {がスキップされてしまうと入れてしまう。
useEffect(() => {
console.log('aaa')
setauthHistory(localStorage.getItem('authhistory'))
if (authhistory) {
console.log('authhistory')
console.log(authhistory)
//console.log('ninja[0].mail')
//console.log(ninja[0].mail)
if(authhistory!=ninja[0].mail){router.push('/ID/'+ninja[0].userid)}
}
}, [authhistory])
ここに }else{router.push(‘/‘)}を組み込み。直入力で入ろうとした場合にhomeに戻らせる。
きちんと機能している。
次にログインして自分のeditページに入れるかを確認。Vercelの読み込みに合わせたEditへの大文字化で多少の修正を行う。
現段階でauthhistoryが設定される前にuseeffect部分が何度も読み込まれてしまっているので、authhistoryをきちんと持っていてもhomeに戻されてしまう。調整が必要。
ログで console.log(localStorage.getItem('authhistory’))がきちんと取れているかを確認。きちんと毎回localStorage.getItem('authhistory’)は抽出できている。
if (authhistory) {をif (localStorage.getItem('authhistory') {に変更。その上で}else{router.push(‘/‘)}を復活させる。
同時にこちらも修正。
if(localStorage.getItem('authhistory')!=ninja[0].mail){router.push('/ID/'+ninja[0].userid)}
setauthHistory(localStorage.getItem('authhistory’))はuseeffect内でしなくても良いので外に出しても良いか。
