ユーザー名&メールアドレスを変更した際にローカル環境を正常に立ち上げられなくなった!!

どこのブランチに移動してもブラウザが正常に表示されない問題が...
しかもこれは正常に表示されたりされなかったり。 直ったと思ったらまた出てくる...。 エラーはこんな感じ...

Chrome

Screen Shot 2020-10-01 at 13.26.15.png

Refused to execute script from 'http://localhost:3000/styles/style-app.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute Because a cookie's SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery. Resolve this issue by updating the attributes of the cookie: Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use. Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests

Firefox

Cookie "connect.sid" は "secure" 属性なしで "SameSite" 属性に "none" または不正な値が設定されているため、まもなく拒否されます。"SameSite" 属性についての詳細は https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite をお読みください。 login Cookie "connect.sid" は "secure" 属性なしで "SameSite" 属性に "none" または不正な値が設定されているため、まもなく拒否されます。"SameSite" 属性についての詳細は https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite をお読みください。 2 login Cookie "io" は "secure" 属性なしで "SameSite" 属性に "none" または不正な値が設定されているため、まもなく拒否されます。"SameSite" 属性についての詳細は https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite をお読みください。 2 socket.io Cookie "io" は "secure" 属性なしで "SameSite" 属性に "none" または不正な値が設定されているため、まもなく拒否されます。"SameSite" 属性についての詳細は https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite をお読みください。 2 socket.io Cookie "connect.sid" は "secure" 属性なしで "SameSite" 属性に "none" または不正な値が設定されているため、まもなく拒否されます。"SameSite" 属性についての詳細は https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite をお読みください。 login Cookie "connect.sid" は "secure" 属性なしで "SameSite" 属性に "none" または不正な値が設定されているため、まもなく拒否されます。"SameSite" 属性についての詳細は https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite をお読みください。 login Cookie "io" は "secure" 属性なしで "SameSite" 属性に "none" または不正な値が設定されているため、まもなく拒否されます。"SameSite" 属性についての詳細は https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite をお読みください。 2 socket.io Cookie "io" は "secure" 属性なしで "SameSite" 属性に "none" または不正な値が設定されているため、まもなく拒否されます。"SameSite" 属性についての詳細は https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite をお読みください。 2 socket.io MIME タイプ ("text/html") の不一致により "http://localhost:3000/login" からのリソースがブロックされました (X-Content-Type-Options: nosniff)。 login <script> のソース "http://localhost:3000/styles/style-app.bundle.js" の読み込みに失敗しました。 login:120:1 MIME タイプ ("text/html") の不一致により "http://localhost:3000/login" からのリソースがブロックされました (X-Content-Type-Options: nosniff)。 login MIME タイプ ("text/html") の不一致により "http://localhost:3000/login" からのリソースがブロックされました (X-Content-Type-Options: nosniff)。 login <script> のソース "http://localhost:3000/styles/theme-nature.bundle.js" の読み込みに失敗しました。

やったこと

  1. devContainerでrebuildしてみる 1 VScode上のターミナルをみると、
  2. configの許可がないよーという旨のエラーが出る(エラーをメモするの忘れました...)
  3. git config -l --globalコマンドをうち、usernameとemailを確認
    • 私の場合、古いままだったのでブラウザのアクセス権限がなかった模様

開発環境の構築 external_link

git config --global user.name "Your Name" git config --global user.email "yourname@example.com"

↑これで再度設定。

補足

上記はターミナル上でやって変更できた しかし、VScode上のターミナルでgit config -l --globalを打つとなぜか権限が与えられていない旨のエラーが出る

node ➜ /workspace/growi () $ git config --global user.name "kaori" warning: unable to access '.git/config': Operation not permitted warning: unable to access '.git/config': Operation not permitted fatal: unknown error occurred while reading the configuration files warning: unable to access '.git/config': Operation not permitted warning: unable to access '.git/config': Operation not permitted

そこで、gitのコマンドではなく、vimのコマンドでファイルの中身を参照(vi config)すると、 直接中身を書き換えることができた。(vimの操作には注意)

vimメモ

x: 一文字消す q!: vimから脱出する。

gitコマンドでは書き換えられなかったが、vimでは変更できた。(これの理由は謎)

  1. ユーザー名とメールアドレスが変更できたか確認できたら、いつも通りyarn, yarn build, yarn serverする

これでできた! (今後エラーが再現しなければのお話)

まとめ

  • css ファイルへのアクセス権限がなかったからブラウザも正常に表示されなかったみたい

  • 他のブランチにうつってdevContainer上で、git config -l --globalをしたら、usernameとmail adlessが昔のままの時がある。 その時は、再度

git config --global user.name "Your Name" git config --global user.email "yourname@example.com"

で新しいものに書き換えましょう。

yusuketkがサポートしてくれた

Screen Shot 2020-10-01 at 20.35.47.png