Simplify with-noscript example (#9094)

## Changelog

- Removed react-lazyload
- Removed images
- Removed ReactDOMServer from Client
- Removed next.config.js

## Notes

**CommonJS vs ESM:** In the future we might be able to use top level `await` in order to import only on the server (e.g.: `await import(“react-dom/server”)`)

Until then we need to mix CommonJS and ESM in favor of messing with the webpack config.

examples/with-noscript/components/Noscript.js

@@ -1,7 +1,15 @@
 import React from 'react'
-import ReactDOMServer from 'react-dom/server'
 
-export default function Noscript (props) {
-  const staticMarkup = ReactDOMServer.renderToStaticMarkup(props.children)
+// We don't want to send 'react-dom/server' to the client
+let ReactDOMServer
+if (typeof window === 'undefined') {
+  ReactDOMServer = require('react-dom/server')
+}
+
+export default function Noscript ({ children }) {
+  if (!ReactDOMServer) {
+    return null
+  }
+  const staticMarkup = ReactDOMServer.renderToStaticMarkup(children)
   return <noscript dangerouslySetInnerHTML={{ __html: staticMarkup }} />
 }

examples/with-noscript/package.json

@@ -9,8 +9,7 @@
   "dependencies": {
     "next": "latest",
     "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-lazyload": "^2.2.7"
+    "react-dom": "^16.7.0"
   },
   "license": "ISC"
 }

examples/with-noscript/pages/index.js

@@ -1,35 +1,15 @@
 import React from 'react'
-import LazyLoad from 'react-lazyload'
 import Noscript from '../components/Noscript'
 
-const images = [
-  '/static/img/reactjs.png',
-  '/static/img/nextjs.png',
-  '/static/img/vuejs.png',
-  '/static/img/angular.jpg'
-]
+export default function IndexPage () {
+  return (
+    <>
+      <h1>noscript</h1>
+      <p>Disable JavaScript to see it in action:</p>
 
-class Index extends React.Component {
-  static getInitialProps (context) {
-    const { isServer } = context
-    return { isServer }
-  }
-  render () {
-    return (
-      <div style={{ textAlign: 'center' }}>
-        {images.map((item, index) => (
-          <div key={index}>
-            <LazyLoad height={700} offset={100}>
-              <img width={700} height={700} src={item} alt={`image_${index}`} />
-            </LazyLoad>
-            <Noscript>
-              <img width={700} height={700} src={item} alt={`image_${index}`} />
-            </Noscript>
-          </div>
-        ))}
-      </div>
-    )
-  }
-}
+      <hr />
 
-export default Index
+      <Noscript>Noscript is enabled!</Noscript>
+    </>
+  )
+}