🎁 The Js-Craft Guide to React is now available with a 30% off discount!

Fixing the – selector “body” is not pure (pure selectors must contain at least one local class or id) – error in NextJs

While working on some CSS styling experiments for a NextJs page I got the below error:

Selector "body" is not pure (pure selectors must contain at least one local class or id)

Why the error happened?

Because ... CSS modules. In a CSS module, you can't directly have simple element selectors such as:

body {/* rules here */}
/* or */
div {/* rules here */}

I was having the following structure in my app folder:

/app
    layout.js
    page.js
    utils.module.css    

Somewhere in the utils.module.css file, I was trying to change the background color of the body element:

/*app/utils.module.css*/
body { /*... */}
.my-form { /*... */}

And given that in a CSS module, you can only have selectors that are based on a class or id, the error was thrown.

Who to fix it?

There are two ways we can fix this error.

Option 1: put all the general styling in a global css file.

This should be the optimal solution in most cases.

Anything that has to do with the general styling should go in a global CSS file, not into a module. Something like this:

/*app/global.css*/
* { ... }
body { ... }
p {...}

And we can import it in the general layout file:

// app/layout.js
import "./global.css";
export default function StyledRootLayout({ children }) {
  return (
    <html>
      <head />
      <body>{children}</body>
    </html>
  )
}

This will ensure that the rules from global.css are applied to all the pages.

The utils.module.css module file should be imported only where the classes and ID's contained in it are needed.

Option 2: add a class to the body element

Another way to fix it is to add a class (or id) to the targeted element:

/*app/utils.module.css*/
body.test {
    border: 2px solid blue;
}

And we can later import the module and use the class:

// app/layout.js
import "./utils.module.css";
export default function StyledRootLayout({ children }) {
  return (
    <html>
      <head />
      <body className={`${styles.test}`}>{children}</body>
    </html>
  )
}

10 Javascript AI projects with Langchain & React

Not sure what to build? Dive in with these Javascript AI projects! Learn how to build LLM powered apps using Langchain.js and React! Connect your apps to LLMs such as OpenAI, create agents, use vector databases, or setup AI context.

10 Javascript AI projects with Langchain & React

Not sure what to build? Dive in with these Javascript AI projects! Learn how to build LLM powered apps using Langchain.js and React! Connect your apps to LLMs such as OpenAI, create agents, use vector databases, or setup AI context.


Leave a Reply

Your email address will not be published. Required fields are marked *

📘 The Guide to React Home Screencasts Best of Newsletter Search X

📘 - 10 Javascript AI projects with React and LangChain

Hi friend! Before you go, just wanted to let you know about the 10 Javascript AI projects ideas with React and LangChain FREE ebook.

One of the best ways to learn is by doing the work. Choose from these 10 project ideas and start working on topics such as:

  • How does LangChain work
  • Connecting to OpenAI LLM
  • Create AI Agents
  • Simple and Sequential Chains
  • Adding Memory (Chat Context)
  • Prompt Templates
  • Using OutputParsers and Tools for Agents
  • Work with Documents and more...

Keep building and see the new capabilities LLM models can add to your React app! Get all projects as an ebook right to your inbox!

X