(examples): fix missed peer dependencies (vercel#26069)

Fixes some examples from vercel#25854 - with-kea [live demo](https://stackblitz.com/github/akellbl4/next.js/tree/examples/missed-peer-deps/examples/with-kea) - with-mobx [live demo](https://stackblitz.com/github/akellbl4/next.js/tree/examples/missed-peer-deps/examples/with-mobx) - with-mobx-react-lite [live demo](https://stackblitz.com/github/akellbl4/next.js/tree/examples/missed-peer-deps/examples/with-mobx-react-lite) - with-mobx-state-tree [live demo](https://stackblitz.com/github/akellbl4/next.js/tree/examples/missed-peer-deps/examples/with-mobx-state-tree) ## Documentation / Examples - [x] Add the StackBlitz button - [x] Make sure the linting passes
blitz-js · Jun 14, 2021 · b42cc72 · b42cc72
1 parent f47ee59
commit b42cc72
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 0 deletions.
diff --git a/examples/with-kea/README.md b/examples/with-kea/README.md
@@ -2,6 +2,12 @@
 
 This example uses [kea](https://github.com/keajs/kea).
 
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-kea)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):

diff --git a/examples/with-kea/package.json b/examples/with-kea/package.json
@@ -19,6 +19,7 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@babel/core": "7.14.5",
     "@babel/plugin-proposal-decorators": "^7.1.0"
   },
   "babel": {

diff --git a/examples/with-mobx-react-lite/README.md b/examples/with-mobx-react-lite/README.md
@@ -16,6 +16,12 @@ StoreProvider.js component is used to instantiate the `Store` both on the server
 
 Both components are using a custom hook `useStore` to pull in the `Store` from the provider.
 
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx-react-lite)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):

diff --git a/examples/with-mobx-react-lite/package.json b/examples/with-mobx-react-lite/package.json
@@ -14,6 +14,7 @@
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
+    "@babel/core": "7.14.5",
     "@babel/plugin-proposal-class-properties": "^7.1.0"
   },
   "license": "MIT"

diff --git a/examples/with-mobx-state-tree/README.md b/examples/with-mobx-state-tree/README.md
@@ -10,6 +10,12 @@ The trick here for supporting universal mobx is to separate the cases for the cl
 
 The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree.
 
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx-state-tree)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):

diff --git a/examples/with-mobx-state-tree/package.json b/examples/with-mobx-state-tree/package.json
@@ -15,6 +15,7 @@
     "react-dom": "^16.7.0"
   },
   "devDependencies": {
+    "@babel/core": "7.14.5",
     "@babel/plugin-proposal-decorators": "^7.1.2"
   },
   "license": "MIT"

diff --git a/examples/with-mobx/README.md b/examples/with-mobx/README.md
@@ -10,6 +10,12 @@ The trick here for supporting universal mobx is to separate the cases for the cl
 
 The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree.
 
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):

diff --git a/examples/with-mobx/package.json b/examples/with-mobx/package.json
@@ -15,6 +15,7 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@babel/core": "7.14.5",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/plugin-proposal-decorators": "^7.1.0"
   }