title: Next.js 9.5, global scss in _app throwing an error
body: <p>When importing an Scss file from _app.js, an error is thrown and the page fails to render with the error : <strong>Cannot read property 'parentNode' of null</strong></p>
  <p><strong>Error :</strong></p>
  <blockquote>
  <p>was not caught TypeError: Cannot read property 'parentNode' of null
  at Object.options.insert (index.scss?f260:14)
  at insertStyleElement (injectStylesIntoStyleTag.js?2dba:109)
  at addStyle (injectStylesIntoStyleTag.js?2dba:208)
  at modulesToDom (injectStylesIntoStyleTag.js?2dba:81)
  at module.exports (injectStylesIntoStyleTag.js?2dba:239)
  at eval (index.scss?f260:21)
  at Object../styles/index.scss (_app.js?ts=1596964640246:2465)
  at <strong>webpack_require</strong> (webpack.js?ts=1596964640246:873)
  at fn (webpack.js?ts=1596964640246:151)
  at Module.eval (_app.page.js:16)
  at eval (_app.page.js?f215:35)
  at Module../pages/_app.page.js (_app.js?ts=1596964640246:2346)
  at <strong>webpack_require</strong> (webpack.js?ts=1596964640246:873)
  at fn (webpack.js?ts=1596964640246:151)
  at eval (next-client-pages-loader.js?aaa7:5)
  at register (page-loader.js?d172:289)
  at PageLoader.registerPage (page-loader.js?d172:318)
  at Array.register [as push] (index.js?4a51:60)
  at eval (next-client-pages-loader.js?aaa7:2)
  at Object../node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2F_app&amp;absolutePagePath=private-next-pages%2F_app.page.js!./
  (_app.js?ts=1596964640246:1282)
  at <strong>webpack_require</strong> (webpack.js?ts=1596964640246:873)
  at fn (webpack.js?ts=1596964640246:151)
  at Object.0 (_app.js?ts=1596964640246:2476)
  at <strong>webpack_require</strong> (webpack.js?ts=1596964640246:873)
  at checkDeferredModules (webpack.js?ts=1596964640246:46)</p>
  </blockquote>
  <p>When click on the file where the error come from :</p>
  <pre><code>var content = require(&quot;!!../../node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!../../node_modules/next/dist/compiled/postcss-loader/index.js??__nextjs_postcss!../../node_modules/resolve-url-loader/index.js??ref--5-oneOf-6-3!../../node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./styles.scss&quot;);
  
  if (typeof content === 'string') {
    content = [[module.id, content, '']];
  }
  
  var options = {}
  
  options.insert = function(element){// These elements should always exist. If they do not,
  // this code should fail.
  var anchorElement=document.querySelector('#__next_css__DO_NOT_USE__');var parentNode=anchorElement.parentNode;// Normally &lt;head&gt;
  // Each style tag should be placed right before our
  // anchor. By inserting before and not after, we do not
  // need to track the last inserted element.
  parentNode.insertBefore(element,anchorElement)// Remember: this is development only code.
  //
  // After styles are injected, we need to remove the
  // &lt;style&gt; tags that set `body { display: none; }`.
  //
  // We use `requestAnimationFrame` as a way to defer
  // this operation since there may be multiple style
  // tags.
  ;(self.requestAnimationFrame||setTimeout)(function(){for(var x=document.querySelectorAll('[data-next-hide-fouc]'),i=x.length;i--;){x[i].parentNode.removeChild(x[i]);}});};
  options.singleton = false;
  
  var update = require(&quot;!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js&quot;)(content, options);
  
  if (content.locals) {
    module.exports = content.locals;
  }
  
  if (module.hot) {
    if (!content.locals) {
      module.hot.accept(
        &quot;!!../../node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!../../node_modules/next/dist/compiled/postcss-loader/index.js??__nextjs_postcss!../../node_modules/resolve-url-loader/index.js??ref--5-oneOf-6-3!../../node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./styles.scss&quot;,
        function () {
          var newContent = require(&quot;!!../../node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!../../node_modules/next/dist/compiled/postcss-loader/index.js??__nextjs_postcss!../../node_modules/resolve-url-loader/index.js??ref--5-oneOf-6-3!../../node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./styles.scss&quot;);
  
          if (typeof newContent === 'string') {
            newContent = [[module.id, newContent, '']];
          }
          
          update(newContent);
        }
      )
    }
  
    module.hot.dispose(function() { 
      update();
    });
  }
  </code></pre>