Updated router samples to use the EventEmitter

Following https://github.com/zeit/next.js/pull/4952

I found two examples with the deprecated`props.url` :
- `with-ioc`
- `with-next-routes`

* replace componentWillReceiveProps by componentDidUpdate

* replace props.url by withRouter HOC

* fix deprecated `props.url` in with-shallow-routing example

- [x] Add unit test
- [x] Allow to get the display name of a native component (e.g.: `div`) without throwing
- [ ] Remove displayName in production mode

Fixes #4691
Fixes #4614

This PR gives path to https://github.com/zeit/next-plugins/pull/242

I did not add or remove `^` near dependency versions in package.json files. However, I don't exclude that some changes can be made given that rc is more stable than beta.

* allow og:image duplicates

* add tests

* update tests

* fix spacing

Changes:

* Split `Header` component trough `_document.js` and `_app.js`
* Attached Router events with a way described in the [documentation](https://github.com/zeit/next.js#router-events) (though in the documentation is says it should be `Router.events.on` while I managed to get it working only by `Router.router.events.on` and I had to place it inside `componentDidMount`)

`<Container>` does not receive any property. There is no way the *scrollToHash* logic can work right now. I believe it's a regression. It was working fine at some point. I'm sorry, I'm too lazy to add a test.

This fix was tested on Material-UI 👌.

This bug reproduction is the following:
As soon as you want to transition to a new page with a hash. The scroll doesn't change.
- start on pageA
- you scrollTop to 100
- you move to pageB#hash
- you stay at scrollTop 100, but #hash is at scrollTop 400.

* Make wasm files load on ssr

* Upgrade React for tests

* Throw error if getInitialProps is defined as as instance method

Omitting the static keyword happens pretty often. Therefore we should trigger a warning in devmode.

Closes: #4782

* Document getInitialProps error

* Add unit tests for loadGetInitialProps

* Added example: with-typestyle

* Fixed bug: Rendering the DOM tree twice

## Issue

Running [examples/with-custom-babel-config](https://github.com/zeit/next.js/tree/canary/examples/with-custom-babel-config) will result in the following error message:

```
./pages/index.js
Module build failed (from /some_path/next.js/dist/build/webpack/loaders/next-babel-loader.js):
Error: [BABEL] /some_path/next.js/examples/with-custom-babel-config/pages/index.js: 
As of v7.0.0-beta.55, we've removed Babel's Stage presets.
Please consider reading our blog post on this decision at
https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
for more details. TL;DR is that it's more beneficial in the
  long run to explicitly add which proposals to use.

...
```

## Explanation

Babel removed Babel's Stage presets on July 27, 2018.

More info: https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

## Solution

I've updated the example so ist just uses the babel plugin it actually needs.

## Related 

Closes: #4772

## Issue

I decided to rewrite the [with-dotenv](https://github.com/zeit/next.js/tree/canary/examples/with-dotenv) using [dotenv-webpack](https://github.com/mrsteele/dotenv-webpack) example because:

- changes doesn't get applied  (#4748, brysgo/babel-plugin-inline-dotenv#13)
- the production mode doesn't work at all
- this approach has already been used in the [examples/relay-modern](https://github.com/zeit/next.js/blob/9320d9f006164f2e997982ce76e80122049ccb3c/examples/with-relay-modern/next.config.js)
- it is [documented](https://webpack.js.org/plugins/environment-plugin/#dotenvplugin) by webpack

## Alternatives

* remove/deprecate example
* fix babel-plugin-inline-dotenv

## Related

Closes: #4748 

* Deprecate with-global-stylesheet example

Use @zeit/next-css instead

https://github.com/zeit/next-plugins/tree/master/packages/next-css

RELATED ISSUE: #4902

* Deprecate with-global-stylesheet-simple example

Use @zeit/next-css instead

https://github.com/zeit/next-plugins/tree/master/packages/next-css

RELATED ISSUE: #4902

## Context

When upgrading to Next.js 6.1.1-canary.4 and using the `emit-file-loader` included in Next.js, the following error is thrown:

```bash
 error  in ./src/graveyard/pages/_app.scss
Module build failed (from ../node_modules/next/dist/build/webpack/loaders/emit-file-loader.js):
TypeError: Cannot read property 'context' of undefined
    at Object.module.exports (~/project-root/node_modules/next/dist/build/webpack/load
ers/emit-file-loader.js:27:68)

 @ ./src/pages/_app.js 35:0-53 156:17-26 157:13-22
 @ multi ./pages/_app.js
```

`next.config.js` (shortened):
```js
module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        {
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext].js'
          }
        },
        {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            extends: path.resolve(__dirname, './src/.babelrc')
          }
        },
        'styled-jsx-css-loader',
        { loader: 'postcss-loader', options: { sourceMap: dev } },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: dev
          }
        }
      ]
    });

    return config;
  }
};
```

## Suggested Fix

A quick Google search brought me to a [related issue in `webpack-loader`](https://github.com/webpack-contrib/worker-loader/issues/125). As pointed out in the [Webpack docs](https://webpack.js.org/api/loaders/#this-rootcontext):

> Starting with webpack 4, the formerly `this.options.context` is provided as `this.rootContext`.

This PR makes this change while maintaining backward compatibility.

## System information

Next.js: 6.1.1-canary.4
Node: v9.3.0

Fixes #4916

Removes componentWillMount and uses memoize instead as recommended here: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

react-codemod recommended way of having methods defined

https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles

https://github.com/reactjs/react-codemod#manual-bind-to-arrow

Changes:
- Use css prop on the element to style it
- Add webpack + babelrc configuration to remove otherwise needed import boilerplate [according to glamor docs](https://github.com/threepointone/glamor/blob/master/docs/createElement.md)

Rationale: The killer feature of glamor that makes it so great is that it relieves you from naming classes/styles if you use the custom css prop. Together with the babel plugin you also don't need any extra import wherever the css prop is used.

All the real world uses I've seen of glamor has used the css props so I think the example should reflect this. As an example here is docs how to use glamor with gatsby (using the css prop):
https://www.gatsbyjs.org/docs/glamor/

**Changes:**
- Fixed "was character fetched on server" message by properly passing `isServer`.
- Stop fetching if there was an error (currently it keeps sending requests to the same endpoint every 3 sec)

**Related:**
- https://github.com/zeit/next.js/pull/4818
- https://github.com/zeit/next.js/issues/4724

Changes:

* moved the configuration from HOC to `_app.js`
* fixed the example, as `componentDidCatch` catches errors during rendering phase, but not within event handlers.

https://github.com/webpack/webpack.js.org/issues/2096

Add behaviors to make `EventEmitter` a bit more like its NodeJS counterpart. This should make using it a bit less surprising.

Otherwise folks might miss that part and get checksum mismatches!

Followup of https://github.com/zeit/next.js/issues/4863#issuecomment-408920755

Depends on https://github.com/zeit/next-plugins/pull/228

Failing tests are expected as `@zeit/next-css` has to be updated/released first.

This implements rendering of `.css` chunks. Effectively removing the custom document requirement when adding next-css/sass/less/stylus.

Missing configuration in package.json and .babelrc causes this example to be broken after installing and running the example.