Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

global css in _app throwing error

See original GitHub issue

Bug report

Describe the bug

When importing a file from _app.tsx, an error is thrown and the page fails to render

index.js:1 Error was not caught TypeError: Cannot read property ‘parentNode’ of null at Object.push…/src/pages/font.css.options.insert (font.css?2cd5:11) at insertStyleElement (injectStylesIntoStyleTag.js:122) at addStyle (injectStylesIntoStyleTag.js:219) at addStylesToDom (injectStylesIntoStyleTag.js:94) at push…/node_modules/style->loader/dist/runtime/injectStylesIntoStyleTag.js.module.exports (injectStylesIntoStyleTag.js:251) at Object…/src/pages/font.css (font.css?2cd5:26) at webpack_require (bootstrap:792) at fn (bootstrap:150) at Module…/src/pages/_app.tsx (with-apollo.tsx:36) at webpack_require (bootstrap:792)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

a relatively simple _app.js:

import * as React from 'react';
import { Global } from '@emotion/core';
import { Monterey } from '@tedconf/monterey';
import App from 'next/app';
import { ApolloProvider } from '@apollo/react-hooks';
import { I18nProvider } from '@lingui/react';
import objectFitImages from 'object-fit-images';
import withApollo from '../lib/with-apollo';
import './font.css';

const catalogEN = require('../locales/en/messages.po');

class MyApp extends App<{ apollo: any }> {
  componentDidMount() {
    objectFitImages();
  }

  render() {
    const { Component, pageProps, apollo } = this.props;

    return (
      <I18nProvider language="en" catalogs={{ en: catalogEN }}>
        <ApolloProvider client={apollo}>
          <link rel="icon" href="/favicon.ico" />
          <Global
            styles={{
              html: {
                fontFamily: 'Inter, sans-serif',
              },
            }}
          />
          <Monterey>
            <Component {...pageProps} />
          </Monterey>
        </ApolloProvider>
      </I18nProvider>
    );
  }
}

export default withApollo(MyApp);

and a simple css file:

@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-style: normal;
  font-named-instance: 'Regular';
  font-display: swap;
  src: url('/fonts/inter-upright.var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-style: italic;
  font-named-instance: 'Italic';
  font-display: swap;
  src: url('/fonts/inter-italic.var.woff2') format('woff2');
}
body {
  font-variant-ligatures: normal;
}

Expected behavior

The CSS should load or the error should be caught and decipherable

Screenshots

If applicable, add screenshots to help explain your problem.

System information

OS: macOS
Browser (if applies) chrome
Version of Next.js: 9.0.2

Additional context

Just tried to switch from withCSS.

Issue Analytics

State:
Created 4 years ago
Comments:12 (4 by maintainers)

Top GitHub Comments

25reactions

Zhekaztcommented, Apr 12, 2020

if you use custom _document.js try to add <Head / > component like this

return (
  <Html>
    <Head />
        <body>
	  <Main />
          <NextScript />
       </body>
    </Html> 
 );
}

1reaction

Temkitcommented, Aug 14, 2020

thanks @Timer your answer makes me delete the _document page and no more error !

Top Results From Across the Web

Import Global CSS file inside _app.js in next js throws error ...

So, I tried to import some global style in the _app.js component. But when I build the code, I get the following error....

Solving the React Error: Not Picking Up CSS Style | Pluralsight

In this guide, you will learn about the errors that can occur while importing a CSS file into your React file.

Basic Features: Built-in CSS Support - Next.js

Next.js supports including CSS files as Global CSS or CSS Modules, using `styled-jsx` for CSS-in-JS, or any other CSS-in-JS solution! Learn more here....

global css cannot be imported from within node_modules.

I try to use your library in NextJS app but I accuse following error:./node_modules/normalize.css/normalize.css Global CSS cannot be imported from within ...

Handle errors in ASP.NET Core Blazor apps - Microsoft Learn

Alternative global exception handling ... If constructor logic may throw exceptions, the app should trap the exceptions using a try-catch ...