From 4e98cdcf735246ea5d8175dcc4c6234a42fbad2b Mon Sep 17 00:00:00 2001
From: Thang Vu <31528554+ThangHuuVu@users.noreply.github.com>
Date: Tue, 20 Jul 2021 21:15:02 +0700
Subject: [PATCH] fix: hydration warning in with-mobx-state-tree-typescript
 example (#27339)

## Bug

- [x] Related issues linked using `fixes #number` fixes https://github.com/vercel/next.js/issues/27290
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [x] Make sure the linting passes
---
 .../components/SampleComponent.tsx                            | 2 +-
 examples/with-mobx-state-tree-typescript/next-env.d.ts        | 1 +
 examples/with-mobx-state-tree-typescript/pages/ssg.tsx        | 4 ++--
 examples/with-mobx-state-tree-typescript/pages/ssr.tsx        | 4 ++--
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/examples/with-mobx-state-tree-typescript/components/SampleComponent.tsx b/examples/with-mobx-state-tree-typescript/components/SampleComponent.tsx
index 146094c4740cb..00be63f77390f 100644
--- a/examples/with-mobx-state-tree-typescript/components/SampleComponent.tsx
+++ b/examples/with-mobx-state-tree-typescript/components/SampleComponent.tsx
@@ -11,7 +11,7 @@ interface IOwnProps {
 }
 
 const SampleComponent: React.FC<IOwnProps> = observer((props) => {
-  const { lastUpdate, light, start, stop } = useStore('')
+  const { lastUpdate, light, start, stop } = useStore(props.store)
 
   useEffect(() => {
     start()
diff --git a/examples/with-mobx-state-tree-typescript/next-env.d.ts b/examples/with-mobx-state-tree-typescript/next-env.d.ts
index 7b7aa2c7727d8..c6643fda12ff6 100644
--- a/examples/with-mobx-state-tree-typescript/next-env.d.ts
+++ b/examples/with-mobx-state-tree-typescript/next-env.d.ts
@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
diff --git a/examples/with-mobx-state-tree-typescript/pages/ssg.tsx b/examples/with-mobx-state-tree-typescript/pages/ssg.tsx
index 4191006042e60..d26f34ddcf70d 100644
--- a/examples/with-mobx-state-tree-typescript/pages/ssg.tsx
+++ b/examples/with-mobx-state-tree-typescript/pages/ssg.tsx
@@ -2,8 +2,8 @@ import { getSnapshot } from 'mobx-state-tree'
 import SampleComponent from '../components/SampleComponent'
 import { initializeStore } from '../store'
 
-export default function Ssg() {
-  return <SampleComponent title={'SSG Page'} linkTo="/" />
+export default function Ssg({ initialState }) {
+  return <SampleComponent title={'SSG Page'} linkTo="/" store={initialState} />
 }
 
 // If you build and start the app, the date returned here will have the same
diff --git a/examples/with-mobx-state-tree-typescript/pages/ssr.tsx b/examples/with-mobx-state-tree-typescript/pages/ssr.tsx
index 8bdb3f3e50ad1..3210abab936ad 100644
--- a/examples/with-mobx-state-tree-typescript/pages/ssr.tsx
+++ b/examples/with-mobx-state-tree-typescript/pages/ssr.tsx
@@ -2,8 +2,8 @@ import { getSnapshot } from 'mobx-state-tree'
 import SampleComponent from '../components/SampleComponent'
 import { initializeStore } from '../store'
 
-export default function Ssr() {
-  return <SampleComponent title={'SSR Page'} linkTo="/" />
+export default function Ssr({ initialState }) {
+  return <SampleComponent title={'SSR Page'} linkTo="/" store={initialState} />
 }
 
 // The date returned here will be different for every request that hits the page,