update client-only-render-external-dependency example (#4822)

Changes:
* use `dynamic` imports instead of `require`
* update `recharts` dependency

examples/only-client-render-external-dependencies/components/BarChart.js

@@ -0,0 +1,12 @@
+import dynamic from 'next/dynamic'
+
+export default dynamic({
+  modules: () => ({
+    BarChart: import('recharts').then(({ BarChart }) => BarChart),
+    Bar: import('recharts').then(({ Bar }) => Bar)
+  }),
+  render: (props, { BarChart, Bar }) =>
+    <BarChart width={props.width} height={props.height} data={props.data}>
+      <Bar dataKey='uv' fill='#8884d8' />
+    </BarChart>
+})

examples/only-client-render-external-dependencies/components/LineChart.js

@@ -0,0 +1,12 @@
+import dynamic from 'next/dynamic'
+
+export default dynamic({
+  modules: () => ({
+    LineChart: import('recharts').then(({ LineChart }) => LineChart),
+    Line: import('recharts').then(({ Line }) => Line)
+  }),
+  render: (props, { LineChart, Line }) =>
+    <LineChart width={props.width} height={props.height} data={props.data}>
+      <Line type='monotone' dataKey='uv' stroke='#8884d8' />
+    </LineChart>
+})

examples/only-client-render-external-dependencies/package.json

@@ -10,7 +10,7 @@
     "next": "latest",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "recharts": "^1.0.0-beta.0"
+    "recharts": "^1.1.0"
   },
   "license": "ISC"
 }

examples/only-client-render-external-dependencies/pages/chart.js

@@ -1,44 +1,21 @@
 import React from 'react'
-let LineChart
-let Line
-class Chart extends React.Component {
-  constructor () {
-    super()
-    this.state = {
-      chart: false,
-      data: [
-        {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
-        {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
-        {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
-        {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
-        {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
-        {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
-        {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}
-      ]
-    }
-  }
+import BarChart from '../components/BarChart'
 
-  componentDidMount () {
-    LineChart = require('recharts').LineChart
-    Line = require('recharts').Line
+const data = [
+  {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
+  {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+  {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
+  {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+  {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
+  {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
+  {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}
+]
 
-    this.setState({
-      chart: true
-    })
-  }
-
-  render () {
-    return (
-      <div>
-        <h1>Another chart</h1>
-        {this.state.chart &&
-          <LineChart width={400} height={400} data={this.state.data}>
-            <Line type='monotone' dataKey='uv' stroke='#8884d8' />
-          </LineChart>
-        }
-      </div>
-    )
-  }
-}
+const Chart = () => (
+  <div>
+    <h1>Another chart</h1>
+    <BarChart width={400} height={400} data={data} />
+  </div>
+)
 
 export default Chart

examples/only-client-render-external-dependencies/pages/index.js

@@ -1,47 +1,25 @@
 import React from 'react'
 import Link from 'next/link'
-let LineChart
-let Line
+import LineChart from '../components/LineChart'
 
-class Index extends React.Component {
-  constructor () {
-    super()
-    this.state = {
-      chart: false,
-      data: [
-        {name: 'Page A', uv: 1000, pv: 2400, amt: 2400},
-        {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
-        {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
-        {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
-        {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
-        {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
-        {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}
-      ]
-    }
-  }
+const data = [
+  {name: 'Page A', uv: 1000, pv: 2400, amt: 2400},
+  {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
+  {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
+  {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
+  {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
+  {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
+  {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}
+]
 
-  componentDidMount () {
-    LineChart = require('recharts').LineChart
-    Line = require('recharts').Line
-
-    this.setState({
-      chart: true
-    })
-  }
-
-  render () {
-    return (
-      <div>
-        <h1>Chart</h1>
-        <Link href='/chart'><a>Go to another chart</a></Link>
-        {this.state.chart &&
-          <LineChart width={400} height={400} data={this.state.data}>
-            <Line type='monotone' dataKey='uv' stroke='#8884d8' />
-          </LineChart>
-        }
-      </div>
-    )
-  }
-}
+const Index = () => (
+  <div>
+    <h1>Chart</h1>
+    <Link href='/chart'>
+      <a>Go to another chart</a>
+    </Link>
+    <LineChart width={400} height={400} data={data} />
+  </div>
+)
 
 export default Index