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

Exploring the versatility of dynamic routes in Next.js

I am looking to establish a dynamic route hierarchy for my next.js project, where the primary directory is named countries and will contain multiple country subdirectories. www.mysite.com/countries www.mysite.com/countries/united-states www.mysite.com/coun ...

next.jsnextjs-dynamic-routing

Optimize my webpage for a specific location

While developing a game website, I am interested in learning how to enable only specific parts of my website to function while disabling the rest. How can this be achieved? ...

javascripthtmlcssvs-web-site-project

Columns with adjustable widths

I am looking to create a layout with 3 columns (which may change, could be up to 4) that are all flexible width and fill the screen. Does anyone know if this is possible using CSS? Basically, I want three blocks lined up horizontally that take up the enti ...

htmlcss

What is the best way to incorporate styles dynamically in React components?

I am working on a React app where I need to color-code words based on their language. In my styles file, I have different style definitions for each language: english: { // style here } french: { // style here } spanish: { // style here } // etc. ...

reactjsstyles

How can we implement :focus-within styling on Material-UI Select when the input is clicked?

I am currently implementing a Select component inside a div element: <div className="custom-filter custom-filter-data"> <DateRangeIcon className="search-icon"/> <FormControl variant='standard& ...

javascriptreactjsmaterial-ui

The issue with the Next.js navbar is that the highlighting does not disappear when a link from a different <nav> group is clicked

Currently, I am working on setting up a navbar with active link highlighting using Next.js (and React-bootstrap). I have been following a guide on how to achieve this from this source. While some aspects of the highlighting are functioning as expected, ot ...

reactjsnext.jsreact-bootstrapnext-router

Transitioning a codebase from @angular-builders/custom-webpack to NX for project optimization

I need help migrating my Angular project from using "@angular-builders/custom-webpack" build targets to transitioning to an integrated NX monorepo. When I run the command npx nx@latest init --integrated, I receive the following warning: Unsupported build ...

angulartypescriptwebpacknrwl-nxangular-builder

how to adjust the width of a window in React components

When attempting to adjust a number based on the window width in React, I encountered an issue where the width is only being set according to the first IF statement. Could there be something wrong with my code? Take a look below: const hasWindow = typeof ...

reactjstypescript

Is it possible to break a single word when word wrapping?

Is it possible to apply word-wrap: break-word to just one word within an element without affecting the entire element? I find that when I apply it to the entire element, it looks messy. I tried searching for a solution but couldn't find anything. Has ...

htmlcss

Ensuring that nested objects in an absolutely positioned element do not wrap, clear, or stack

Looking for some assistance with my tooltip menu. The problem I'm facing is that my links keep wrapping to a new line, and I can't figure out how to prevent this. I've already attempted using display:inline and float:left on the links within ...

csscss-position

What is the reason for the disparity between CSS box-sizing content-box and border-box?

Consider the following example where I only changed the CSS box-sizing property from content-box to border-box. The resulting output difference is significant. Give this code a try: .box1 { width: 300px; height: 100px; border: 1px solid blue; pa ...

htmlcss

navigate to a different page upon submitting a form in React

I currently have this code snippet in my contact.js file: axios .post('http://localhost:3000/create', book) .then(() => console.log('Created')) .then(() => this.props.history.push({Home})) .catch(err => ...

node.jsreactjsaxios

Tips for incorporating in/out animations with a container for the Slide feature:

I need help creating a component that will slide to the right when mounted, and to the left when unmounted. The Slide component should be contained in a div with the class "profile-slide-container", but I'm unsure how to achieve this. Below is the co ...

javascriptreactjsmaterial-uislidereact-animations

Tips for positioning a div between two vertically aligned input elements

I'm trying to figure out how to place a div between two inputs with the same height and vertically aligned. It seems like a simple task, but for some reason, the code below isn't working: input{ width: 35%; border: 1px solid #A7A7A7; ...

htmlcss

The issue with material-ui 0.15.2 is that it applies extra vendor-prefixed styles on the server side but not on the client side, resulting in warnings in React 15

I have set up my project with the following configurations: react is at version 15.2.1 material-ui is at version 0.15.2 I am using express and universal-router for server-side rendering Every time I include a material-ui component, I encounter this erro ...

cssreactjsmaterial-uiisomorphic-javascriptvendor-prefix

Building a Modal in React and Triggering it for Display, followed by Making an AJAX Request upon Submission

Check out my CodePen snippet (minus delete ajax request): http://codepen.io/martincarlin87/pen/KzPWOw I've been diving into the world of React recently, and I'm working on converting a page in my web application to utilize React instead of just ...

javascriptjqueryreactjs

Excessive content and the upper limit of height

I'm in the process of creating a scrolling table with a maximum height, and here's what I've done so far: <table> <tbody style="height: 300px; overflow:auto;"> //php for loop to populate table with <tr>s/<td>s </t ...

htmlcss

Next.js optimizes the page loading process by preloading every function on the page as soon as it loads, rather than waiting for them to

My functions are all loading onload three times instead of when they should be called. The most frustrating issue is with an onClick event of a button, where it is supposed to open a new page but instead opens multiple new pages in a loop. This creates a c ...

javascripthtmlreactjsnext.js

The debate between having one complex store in Flux architecture versus two smaller ones

When it comes to creating stores for settings, is it better to have more smaller stores or fewer larger ones? For instance, if I have settings for two pages - graphSettings and productSettings, should I create separate stores for each page or combine the ...

reactjsreact-nativeflux

Unable to use saved images with jQuery Slider

I'm currently facing an issue with adding a jQuery slider to my website. It seems that the slider is not displaying images that are saved on my computer, only images from external websites. Below is the code snippet where I have included an image fil ...

jqueryhtmlcss