0

I have an error in my app using mobx and nextJS.

The error as shown at the dev tools is:

index.js:1 Warning: Did not expect server HTML to contain the text node "3" in <h1>.
    in h1 (at pages/index.tsx:18)
    in div (at pages/index.tsx:17)
    in Post (created by inject-with-notesStore(Post))
    in inject-with-notesStore(Post) (at _app.tsx:32)
    in Container (at _app.tsx:31)
    in MobXProvider (at _app.tsx:30)
    in CustomApp
    in Container (created by AppContainer)
    in AppContainer

I am trying to test the response from the @computed function named 'test' declared at testStore.ts.

I expect to receive the value '3' inside 'Pages/index.tsx' as the length of the @observable testArray which is declared at testStore.ts . Instead, i get no value.

Any idea why is this happening?

my code :

testStore.ts

import { observable, action, computed } from "mobx";
import { fetchNotes } from "../api";

export interface INotes {
  createdAt?: number;
  updatedAt?: number;
  __v?: number;
  _id?: number;
  title: string;
  todos: {
    description: string;
    checked: boolean;
    id: boolean;
  }[];
}

class NotesStore {
  @observable notes: INotes[] = observable([]);
  @observable testArray = ["a", "b", "c"];
  
  constructor(initialData = {} as { notes: INotes[] }) {
    this.notes = initialData.notes;
  }

  async fetch() {
    const processedResponse = await fetchNotes();
    this.setNotes(processedResponse);
  }

  @computed get test() {
    return this.testArray.length;
  }

  @action setNotes(notes) {
    this.notes = notes;
  }
}

export default NotesStore;

stores.ts

import { useStaticRendering } from "mobx-react";

import NotesStore, { INotes } from "./testStore";

const isServer = typeof window === "undefined";
useStaticRendering(isServer);

let store = null;

export default function initializeStore(
  initialData = { notesStore: {} as NotesStore }
) {
  if (isServer) {
    return {
      notesStore: new NotesStore(initialData.notesStore),
    };
  }
  if (store === null) {
    store = {
      notesStore: new NotesStore(initialData.notesStore),
    };
  }

  return store;
}

pages/_app.tsx

import React from "react";
import App, { Container } from "next/app";
import { Provider } from "mobx-react";

import initializeStore from "../mobx/stores";

class CustomApp extends App {
  mobxStore: any;
  static async getInitialProps(appContext) {
    const mobxStore = initializeStore();
    appContext.ctx.mobxStore = mobxStore;
    const appProps = await App.getInitialProps(appContext);
    return {
      ...appProps,
      initialMobxState: mobxStore,
    };
  }

  constructor(props) {
    super(props);
    const isServer = typeof window === "undefined";
    this.mobxStore = isServer
      ? props.initialMobxState
      : initializeStore(props.initialMobxState);
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Provider {...this.mobxStore}>
        <Container>
          <Component {...pageProps} />
        </Container>
      </Provider>
    );
  }
}

pages/index.tsx

import React, { Component } from "react";
import { inject, observer } from "mobx-react";

@inject("notesStore")
@observer
class SampleComponent extends Component {
  static async getInitialProps({ mobxStore, query }) {
    await mobxStore.notesStore.fetch();
    return { notesStore: mobxStore.notesStore };
  }

  render() {
    const { notesStore }: any = this.props;
    debugger;

    return (
      <div>
        <h1>{notesStore.test}</h1>
      </div>
    );
  }
}

export default SampleComponent;
Daniel Cohen
  • 9
  • 7

1 Answers1

0

My solution was refactoring my code and using next-mobx wrapper https://github.com/nghiepit/next-mobx-wrapper

Thats the only way i could use mobx and nextjs and enjoy both's functionality.

Daniel Cohen
  • 9
  • 7