Next.js / SSR and GeoDistanceSlider

[chico2k]

Affected Projects React

Library Version: x.y.z reactivesearch 3.6.1 / reactivemaps 3.0.0-beta.4

Describe the bug I get a

TypeError: Cannot read property 'maps' of undefined

when using Next.js and GeoDistanceSlider or GeoDistanceDropdown:

I've tried the workaround mentioned in #1338

To Reproduce

import React, { Component } from 'react';
import {
  ReactiveBase,
  DataSearch,
  SelectedFilters,
  ReactiveList,
  SingleDropdownList,
  MultiDropdownList
} from '@appbaseio/reactivesearch';

import { GeoDistanceSlider, ReactiveGoogleMap } from '@appbaseio/reactivemaps';

import initReactivesearch from '@appbaseio/reactivesearch/lib/server';

import ProfileCard from '../../components/Profile/ProfileCard/search';
import {
  SearchWrapper,
  FilterWrapper,
  ResultWrapper
} from '../../components/Profile/ProfileList/style';

const settings = {
  url:
    typeof window === 'undefined'
      ? 'http://elasticserver:7777/'
      : 'http://localhost:7777/',
  app: 'profiles'
};

const dataSearchProps: any = {
  dataField: ['name', 'sport.sporttype.title'],
  componentId: 'Search',
  URLParams: true,
  autosuggest: true,
  showFilter: true,
  queryFormat: 'and',
  showClear: true,
  react: {
    and: ['Guide', 'Sport']
  }
};

const singleDropdownListProps: any = {
  componentId: 'Guide',
  dataField: 'is_guide.raw',
  URLParams: true,
  react: {
    and: ['Search', 'Sport']
  }
};

const multiDropdownListProps: any = {
  componentId: 'Sport',
  dataField: 'sport.sporttype.title.raw',
  URLParams: true,
  react: {
    and: ['Search', 'Guide']
  }
};

const selectedFiltersProps: any = {
  className: 'custom-class',
  style: { fontSize: '2rem', backgroundColor: 'red' }
};

const reactiveListProps: any = {
  componentId: 'SearchResult',
  size: 5,
  dataField: 'name',
  react: {
    and: ['Search', 'Guide', 'Sport']
  },
  pagination: true,
  render: ({ data }: { data: [] }) => {
    return (
      <ReactiveList.ResultCardsWrapper>
        {data.map((item: ProfileCardProps) => (
          <ProfileCard
            key={item.id}
            id={item.id}
            name={item.name}
            is_guide={item.is_guide}
          />
        ))}
      </ReactiveList.ResultCardsWrapper>
    );
  }
};

const geoSliderProps: any = {
  componentId: 'locationUI',
  dataField: 'location.coordinates',
  range: {
    start: 0,
    end: 20
  }
};

const geoMapProps: any = {
  componentId: 'MapUI',
  dataField: 'location.coordinates',
  title: 'Venue Location Map'
};

const Wrapper = props => {
  return <GeoDistanceSlider {...props} />;
};

export default class Main extends Component {
  static async getInitialProps() {
    return {
      reactiveStore: await initReactivesearch(
        [
          {
            ...dataSearchProps,
            source: DataSearch
          },
          {
            ...reactiveListProps,
            source: ReactiveList
          },
          {
            ...singleDropdownListProps,
            source: SingleDropdownList
          },
          {
            ...multiDropdownListProps,
            source: MultiDropdownList
          },
          {
            ...selectedFiltersProps,
            source: SelectedFilters
          },
          {
            ...geoSliderProps,
            source: GeoDistanceSlider
          },
          {
            ...geoMapProps,
            source: ReactiveGoogleMap
          }
        ],
        null,
        settings
      )
    };
  }

  state = { mount: false };
  componentDidMount() {
    this.setState({ mount: true });
  }

  render() {
    return (
      // <ReactiveBase {...settings}>
      <ReactiveBase {...settings} initialState={this.props.reactiveStore}>
        <DataSearch {...dataSearchProps} />
        <SearchWrapper>
          <FilterWrapper>
            <SingleDropdownList {...singleDropdownListProps} />
            <MultiDropdownList {...multiDropdownListProps} />
            {this.state.mount && <Wrapper {...geoSliderProps} />}
            {/* <GeoDistanceDropdown {...geoMapProps} /> */}
            <ReactiveGoogleMap {...geoMapProps} />
          </FilterWrapper>
          <ResultWrapper>
            <SelectedFilters {...selectedFiltersProps} />
            <ReactiveList {...reactiveListProps} />
          </ResultWrapper>
        </SearchWrapper>
      </ReactiveBase>
    );
  }
}

Screenshots

[ShahAnuj2610]

@chico2k It would be great if you can share code sandbox example.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.