NextJS 1 / 1

スマートフォンのブラウザで表示されない

この記事は以下のような理由によりアーカイブされました。

内容が古くメンテナンスされていない
執筆者の以前の考えである

関連

とりあえず、以下で直った。

<script async src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

.babelrcの設定とかもちょっと調べたけどよく分からず。
時間ある時にまた調べよう。

追記

IntersectionObserverに対応していないのも原因だった。
僕の環境だけかもしれないけど、エラーも何も表示してくれなくてすごい分かりづらい。BrowserStackも試したけど別の変なエラーがでただけで役に立たなかった。

追記(2019-01)

Polyfil ファイルを Webpack の entry に含める

NextJSでブラウザバック時にエラーでページ移動しない時があるので応急処置する

この記事は以下のような理由によりアーカイブされました。

内容が古くメンテナンスされていない
執筆者の以前の考えである

関連

このページはnext@^9以降確認されておらずもう直った可能性があるうので、2020年1月6日にアーカイブ化されました。

環境

next@^6.1.1

(2019-01-13)next@^7にしたら治ったかもしれない…？ (2019-11)そういえばnext@^9辺りから見ていません。直ったかもしれない。

確認した事例

ブラウザバックした時に時々でる。特に最初にアクセスしたページに移動する時は9割ぐらい起きてると思う。ログはこんな感じ。

router.js:533 Uncaught (in promise) TypeError: Cannot read property 'split' of undefined
    at Router.onlyAHashChange (router.js:533)
    at Router._callee2$ (router.js:269)
    at tryCatch (runtime.js:62)
    ...

該当箇所のコードはこうなっている。

    key: "onlyAHashChange",
    // どうやらここで渡ってきている`as`が`undefined`なせいで、
    // その先の`as.split`の呼び出しで起きてる模様
    value: function onlyAHashChange(as) 
      // 略

      var _as$split = as.split('#'),
          _as$split2 = (0, _slicedToArray2.default)(_as$split, 2),
          newUrlNoHash = _as$split2[0],
          newHash = _as$split2[1]; // Makes sure we scroll to the provided hash if the url/hash are the same

色々調べたがさっぱり分からないので応急処置

応急処置というのは、上のasはnext/routerのRouter.beforePopStateで見ることができるので、もしundefinedだったらJavaScriptでページ再読込するというものです。SPAなのにリロードさせちゃうし正直微妙ですが、何も起きないよりはマシです。

どこか_app.jsxやネストの浅い所コンポーネントのcomponentDidMountかどこかで以下のように書きます。

Router.beforePopState(({as}) => {
  if (as === undefined) {
    window.location.href = '/';
    return false;
  }

  return true;
});

うーん、誰か直せた人いたら教えてくださいー；

更新(2018-09-01)

asがundefinedだったらページを更新せずにURLだけ/に書き換え。

Router.beforePopState(({as}) => {
  if (as === undefined) {
    Router.push('/', '/', { shallow: true })
    return false;
  }

  return true;
});