• ..

Sass

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

    環境

    • next@^6.1.1

    追記(2019-01-13)

    next@^7にしたら治ったかもしれない…?

    確認した事例

    ブラウザバックした時に時々でる。特に最初にアクセスしたページに移動する時は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

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

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

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

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

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

    更新(2018-09-01)

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

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