From b50bad56bee89ab006b643483c641af28aeefae2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Connor=20B=C3=A4r?= <connor-baer@users.noreply.github.com>
Date: Tue, 7 Aug 2018 22:49:30 +0200
Subject: [PATCH] [BUG] Fix emit-file-loader compatibility with Webpack 4
 (#4918)

## 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
---
 build/webpack/loaders/emit-file-loader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/webpack/loaders/emit-file-loader.js b/build/webpack/loaders/emit-file-loader.js
index 372112f9..7ab6020f 100644
--- a/build/webpack/loaders/emit-file-loader.js
+++ b/build/webpack/loaders/emit-file-loader.js
@@ -18,7 +18,7 @@ module.exports = function (content, sourceMap) {
   }
 
   const name = query.name || '[hash].[ext]'
-  const context = query.context || this.options.context
+  const context = query.context || this.rootContext || this.options.context
   const regExp = query.regExp
   const opts = { context, content, regExp }
   const interpolateName = query.interpolateName || ((name) => name)