diff --git a/examples/with-emotion/package.json b/examples/with-emotion/package.json
index 93cd6634..7059d4a2 100644
--- a/examples/with-emotion/package.json
+++ b/examples/with-emotion/package.json
@@ -7,13 +7,13 @@
     "start": "next start"
   },
   "dependencies": {
-    "babel-plugin-emotion": "^7.1.0",
-    "emotion": "^7.2.0",
-    "emotion-server": "^7.2.0",
+    "babel-plugin-emotion": "^8.0.4",
+    "emotion": "^8.0.5",
+    "emotion-server": "^8.0.5",
     "next": "^3.0.6",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
-    "react-emotion": "^7.2.0"
+    "react-emotion": "^8.0.5"
   },
   "license": "ISC"
 }
diff --git a/examples/with-emotion/pages/_document.js b/examples/with-emotion/pages/_document.js
index 46ee31d5..c2b120f2 100644
--- a/examples/with-emotion/pages/_document.js
+++ b/examples/with-emotion/pages/_document.js
@@ -1,12 +1,8 @@
 import Document, { Head, Main, NextScript } from 'next/document'
 import { extractCritical } from 'emotion-server'
-import { flush } from 'emotion'
-
-const dev = process.env.NODE_ENV !== 'production'
 
 export default class MyDocument extends Document {
   static getInitialProps ({ renderPage }) {
-    if (dev) { flush() }
     const page = renderPage()
     const styles = extractCritical(page.html)
     return { ...page, ...styles }
diff --git a/examples/with-emotion/pages/index.js b/examples/with-emotion/pages/index.js
index 74aa3e0f..01208e33 100644
--- a/examples/with-emotion/pages/index.js
+++ b/examples/with-emotion/pages/index.js
@@ -1,6 +1,5 @@
 import React from 'react'
-import { hydrate, keyframes, css, injectGlobal } from 'emotion'
-import styled from 'react-emotion'
+import styled, { hydrate, keyframes, css, injectGlobal } from 'react-emotion'
 
 // Adds server generated styles to emotion cache.
 // '__NEXT_DATA__.ids' is set in '_document.js'
@@ -48,15 +47,20 @@ export default () => {
     }
   `
 
-  const Basic = styled.div`composes: ${basicStyles};`
+  const Basic = styled.div`
+    ${basicStyles};
+  `
+
   const Combined = styled.div`
-    composes: ${basicStyles} ${hoverStyles};
+    ${basicStyles};
+    ${hoverStyles};
     & code {
       background-color: linen;
     }
   `
   const Animated = styled.div`
-    composes: ${basicStyles} ${hoverStyles};
+    ${basicStyles};
+    ${hoverStyles};
     & code {
       background-color: linen;
     }