Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Browser back gives error--- TypeError: Cannot read property 'split' of undefined

See original GitHub issue

Description

My issue is similar to this… https://github.com/zeit/next.js/issues/5604 I am using a custom server but I am not using any custom route handling. Even if remove the custom server and only run next i get this error while navigating back using browser back button. As mentioned in https://github.com/zeit/next.js/blob/canary/errors/popstate-state-empty.md I am not manipulating window.history in any place. Still I am getting this error. I am using next/router <Link> for routing.

Screenshot of error

This is the _app.js code

import App from 'next/app';
import Router from 'next/router';
import Head from 'next/head';
import withRedux from 'withRedux';
import { Provider } from 'redux-bundler-react';
import { ThemeProvider } from 'emotion-theming';
import { Global } from '@emotion/core';
import themeOne from 'ui-web/theme';
import { getCookie } from 'modules/authentication';
import configureStore from '../../src/store';
import { persist, cacheVersions } from '../../src/common';
import { appWithTranslation } from '../../i18n';
const makeStore = initialState => configureStore(initialState);
class MyApp extends App {
  static async getInitialProps(props) {
    const { Component, ctx, router } = props;
    if (ctx.isServer && ctx.req.headers.cookie) {
      const token = getCookie('authToken', ctx.req);
      ctx.store.doSetAuthToken(token);
    }
    const pageProps = Component.getInitialProps
      ? await Component.getInitialProps(ctx, router.pathname)
      : {};
    return { pageProps };
  }
  render() {
    const { Component, store, pageProps } = this.props;
    return (
      <Provider store={store}>
        <ThemeProvider theme={themeOne}>
          <Head>
            <title>Learny</title>
            <link
              href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap'
              rel='stylesheet'
            />
          </Head>
          <Global
            styles={theme => ({
              body: {
                margin: 0,
                overflowX: 'hidden',
                backgroundColor: theme.colors.background,
                a: {
                  textDecoration: 'none',
                },
              },
            })}
          />
          <Component {...pageProps} />
        </ThemeProvider>
      </Provider>
    );
  }
}
export default withRedux(makeStore, { debug: false, persist, cacheVersions })(
  appWithTranslation(MyApp)
);

Routing code sample

const ProductCard: React.FC<Props> = (props: Props) => {
  const { product } = props;
  return(
    <Link href={`/learn/[productSeo]`} as={`/learn/${product.seoTitle}`}>
        <Box
          width='productCardW'
          bg='surface'
          sx={{
            boxShadow: 'default',
            cursor: 'pointer',
            position: 'relative',
            ':hover': {
              boxShadow: 'card.hover',
            },
          }}
        >
    </Link>
 );
}

const ProductList: React.FC<Props> = (props: Props) => {
  const { products, title, productType } = props;

  return (
    <>
      <Box height='productCardHEIGHT'>
        <AutoSizer>
          {({ height, width }) => (
            <Swiper
              ref={swiperRef}
              listHeight={height}
              totalLength={products.length}
              slideWidthSize={ITEM_SIZE}
              listLayout='horizontal'
              listWidth={width}
              renderData={products}
              renderItem={({ data, style }): JSX.Element => (
                <Box
                  style={{
                    ...style,
                    paddingTop: GUTTER_SIZE,
                  }}
                >
                  <ProductCard product={data} />
                </Box>
              )}
            />
          )}
        </AutoSizer>
      </Box>
    </>
  );
};

Issue Analytics

State:
Created 4 years ago
Comments:14 (2 by maintainers)

Top GitHub Comments

6reactions

ammarbrohicommented, Oct 25, 2020

For anyone encountering this, it’s likely caused by use of ref={} Like in this case ref={swiperRef}

I just found it after hours of trial and error.

0reactions

balazsorban44commented, Jan 29, 2022

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.