Can you guide me on implementing CSS Houdini in Next.js?

Exploring the world of CSS Houdini in my Next.js project has been quite an adventure. After successfully installing the necessary CSS Houdini package and css-paint-polyfill using yarn, I decided to follow the webpack guidelines provided at .

Below is a snippet from my component:

import 'css-paint-polyfill';
import workletURL from 'url-loader!css-houdini-lines';
import styles from './Separator.module.css';

CSS.paintWorklet.addModule(workletURL);

export default function Separator() {
  return <div className={styles.separator} />;
}

Despite my efforts, I encountered the infamous error message:

error - ReferenceError: window is not defined
at /home/tithos/code/web/new-tim/node_modules/css-paint-polyfill/dist/css-paint-polyfill.js:1:239

Attempting different solutions like placing the import for css-paint-polyfill in a useEffect hook or experimenting with dynamic imports (as suggested on https://nextjs.org/docs/advanced-features/dynamic-import) only led to more errors. Is there anyone out there who has managed to resolve this issue?

cssreactjswebpacknext.jscss-houdini

Answer №1

It seems that the CSS Paint Polyfill is accessing window too eagerly, causing errors in environments without a window object, like during the server phase of Next.js. Here are a few solutions you can try:

  1. Adjust your next.config.js file to mock the module mentioned above for Webpack when isServer is true. You can refer to Next.js documentation for guidance on this.
  2. Create a dynamic component that is only imported on the client side (if you've attempted this before but it didn't work, sharing your approach could help identify any issues).
  3. If all else fails, consider submitting an issue or pull request to the repository hosting the Polyfill to make the access to window more flexible based on its availability.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React Object Array Item State management

After spending a considerable amount of time on this task, I have been trying to achieve the functionality of changing a checked value upon checkbox click. Here is how my initial state is set up: const [todoList, setTodoList] = useState({ foundation: ...

javascriptreactjsreact-hooksuse-statereact-functional-component

Having trouble accessing a CSS file through HTML

Is there a reason why I am facing difficulties accessing main.css from app.html to enable Tailwind CSS? When I try putting it in the style brackets in the .svelte file itself, it throws an error. Can anyone explain why this is happening? <link rel= ...

htmlcsstailwind-csssvelte

Executing npm script within maven to trigger rimraf, copyfiles, and webpack actions

Within my package.json, I have the following script: "clean": "rimraf dist/*" "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist" "dist": "npm run copy & webpack --env=dist" I am looking to configure Maven build in Jenkins to run the dis ...

mavenjenkinsbuildnpmwebpack

Stopping Accordion Title from Moving Vertically in Material-UI

Just finished creating this accordion which will be used as a menu item. However, I've encountered an issue where clicking on the Main title causes the accordion summary to move downward vertically. Any suggestions on how to keep the Main tile fixed ...

cssreactjsmaterial-ui

Setting the default value of a React checkbox to be true

I am dealing with a backend value that initially appears on the UI as false or null. When the value is false or null, I need my checkbox to be checked, and if the backend value is true, then the checkbox should be unchecked. This functionality is implement ...

reactjsmaterial-ui

Content in tab remains stagnant

I am having trouble creating different tabs on a page with unique content in each tab's body. Whenever I click on a new tab, the body content remains the same. I'm not sure if it's an issue with how the tabs are set up in the HTML or if ther ...

javascripthtmlcsstabs

Guide to center-aligning ElementUI transfer components

Has anyone successfully incorporated ElementUI's transfer feature inside a card element and centered it? https://jsfiddle.net/ca1wmjLx/ Any suggestions on how to achieve this? HTML <script src="//unpkg.com/vue/dist/vue.js"></ ...

javascriptcssvue.jselement-ui

Swapping out image sources using a React Hook that includes an onClick event

Despite my best efforts, I have yet to find a solution to this problem. To keep things brief, I am attempting to implement a dark mode toggle in my React application, but my current method feels like a hack. The main issue I am facing is changing the imag ...

javascriptreactjsreact-hooksdom-events

Using a function from one class within another class by passing it as a prop

Below are the methods found in my Search.tsx class. renderSuggestion(suggestion) { <div className="buttons"> <button className="button">View Location</button> <button className="button whitebutton" onClick={this.h ...

javascripteventsreactjstypescriptonclick

Ways to ensure the axios call is completed before proceeding with the codeexecution

I need to use axios to send a request and retrieve some data that I want to pass as a prop to a React Component. Here's my render function: render() { boards = this.fetchBoardList(); return ( <div className="app-wrapper"> ...

javascriptreactjsasync-awaitpromise

Having trouble aligning my CSS form correctly

The issue is with the alignment of the second row of textbox elements under the "Add Equipment" section on this page: While organizing the code in Dreamweaver, the elements line up correctly. However, when viewed in Google Chrome, they shift to the second ...

htmlcss

Learn how to creatively style buttons with dynamic effects using tailwindcss

My Desired Button: I have a Button component that can accept a variant prop. My goal is to have the button's className change dynamically based on the prop passed to it. Instead of using if/else statements for different buttons, I want to use a sing ...

javascriptreactjstypescripttailwind-css

"When attempting to render a Node inside the render() method in React, the error message 'Objects are not valid as a React child' is

On my webpage, I have managed to display the following: export class OverworldComponent extends React.Component<OverworldComponentProps, {}> { render() { return <b>Hello, world!</b> } } However, instead of showing Hello, ...

javascriptreactjstypescriptdom

MUI Version 5: Is it necessary to have @emotion/react or @emotion/styled installed in order to utilize the sx prop?

I recently upgraded my project from version 4 to version 5, and I am exclusively using the sx prop. Despite not having installed @emotion/react, everything appears to be functioning correctly. Is there a compelling reason for me to install @emotion/react ...

reactjsmaterial-ui

How do I create a notification when the div reaches 100% alignment on the left side using Javascript?

Is there a way to receive an alert when the div with the class name "earth" reaches 100% on the left side, without using jQuery? I attempted to utilize setTimeout but I am looking for an alternative method that does not rely on time, but rather on positi ...

javascriptcss

Retrieving user input in React by utilizing the onChange event handler

I have been tasked with creating a Quiz App and I am currently working on building it. The app consists of several components such as "question", "question-list", and "add-question". Within the "add-question" component, there is a form that allows users ...

javascriptreactjsforms

"Enhance User Experience with Material UI Autocomplete feature that allows for multiple

I am encountering an issue with a material ui auto component that I am currently working on. The component's code looks like this: <Autocomplete multiple options={props.cats} defaultValue={editRequest? ...

javascriptreactjsmaterial-ui

The Next.js developer encounters an issue where the build fails due to a ReferenceError on a client component, stating that "window

Just starting out with nextjs, I'm sticking to using only the basic features without diving into any advanced functionalities. During the next build process, I encountered an issue where 6 paths failed because of a ReferenceError: window is not defin ...

javascriptreactjsnext.js

Issue with Nginx causing 404 errors on NextJs API routes

I encountered a problem with my NextJs API returning a 404 error during a page reload in production when executed from getInitialProps. The error message in my PM2 logs indicated that the 404 not found response was coming from Nginx. It appears that NGIN ...

nginxnext.js

Is there a way to pass both the theme and props when using styled() in Material UI-5?

import { AppBar, Avatar, Badge, InputBase, Toolbar, Typography, } from "@mui/material"; import React, { useState } from "react"; import { styled, alpha } from "@mui/material/styles"; import { Mail, Notifications, ...

reactjsmaterial-uijsx