Struggling to run npm build in Next.js project due to webpack errors?

After months of developing this application, I encountered a frustrating error when attempting to run npm run build for the first time today. Despite removing next-transpile-modules from my next.config.js and taking various troubleshooting steps like deleting .next and node_modules, updating dependencies, and reinstalling multiple times with different node and next versions, the issue persisted.

Here are the current versions I'm working with:

node: 16.13.0, next: 12.0.7, react: 17.0.2,

> HookWebpackError: Cannot read properties of undefined (reading 'length')

    at makeWebpackError (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\next\dist\compiled\webpack\bundle5.js:45539:9)
    at F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\next\dist\compiled\webpack\bundle5.js:29467:12
    at eval (eval at create (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\next\dist\compiled\webpack\bundle5.js:140927:10), <anonymous>:34:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) -- inner error --

> TypeError: Cannot read properties of undefined (reading 'length')

        at F:\PROJECTS DJANGO\A_Next_Community\next_server_code\static\css\cf0a424279fe9c8d.css:1622:3
        at p.exports (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\cssnano-preset-simple\dist\index.js:195:156203) 
        ...
        ...

    **caused by plugins in Compilation.hooks.processAssets** <- This part interest's me

    

> TypeError: Cannot read properties of undefined (reading 'length')

        at F:\PROJECTS DJANGO\A_Next_Community\next_server_code\static\css\cf0a424279fe9c8d.css:1622:3
        at p.exports (F:\PROJECTS DJANGO\A_Next_Community\next_server_code\node_modules\cssnano-preset-simple\dist\index.js:195:156203) 
        ...
        ...

> **Build failed because of webpack errors**
javascriptwebpacknext.js

Answer №1

Resolved :

The issue appeared to stem from a particular class within my globals.css file. After removing several classes and attempting a build, the problem was resolved. Although I am unsure of the specific CSS attribute that caused the problem, eliminating this class along with a few others allowed the code to run smoothly.

.glass-container-dark{
  /* background: linear-gradient(to bottom left, rgba(14, 9, 11, 0.6), rgba(45,46,52,0.9)); */
  

  background: linear-gradient(to 98deg, rgba(224, 224, 224, 0.7), rgb(187, 187, 187));

  border-radius: 1rem;
  margin: 0.5rem 0rem;
  padding:1rem;

  /* width: 250px !important;
  height: 170px !important; */
  box-shadow: 2px 2px 10px rgba(12, 12, 12, 0.612);

  
}

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

Understanding ReactJs component syntax: Exploring the nuances and distinctions

Currently diving into the world of Reactjs and working on creating a basic component. I'm puzzled about why this particular syntax for a component: import React, { Component } from 'react'; export default class AboutPage extends Component { ...

javascriptreactjs

Changing color when mouse hovers using Jquery

Currently, I am in the process of converting a flash ad into an html5 ad. I found this demo here, and I would like to replicate the mouse hover effect showcased. When the cursor hovers over the details text in the banner, the entire background changes to ...

javascriptjquerycsshtml

Creating a consolidated System.config mapping for @angular modules using a single .js file

Currently in the process of developing an Angular 2 application, with the specific requirement to consolidate all resulting Javascript files into a single .js file called output.js. Now, the challenge is to incorporate map configuration within System.conf ...

javascriptangulartypescriptbundlesystemjs

Determining whether the user has a token stored in the localStorage is a crucial step in my

I have an app that calls a Login API and returns a token. I store the token in localStorage, but I'm unsure how to validate if the user has a token to log in. What steps can I take to solve this? Below is my login page where I store the token in loca ...

javascriptnode.jsreactjs

What is the best way to connect click events with ExtJS template elements?

Is there a way to assign a click event to each link tag without directly embedding onclick=.... in the XTemplate code? new Ext.XTemplate( '<ul>', '<tpl for="."><li><a href="#{anchor}">{text}</a></li& ...

javascriptextjs4

Trouble altering an attribute using jquery

Hey there, I'm struggling with changing the attribute for an id and can't quite pinpoint where I'm going wrong. It's not making things easier that I'm pretty new to this whole thing as well. I've created a function to ensure ...

javascriptjquery

Enforcing type safety for mysql2 results in Typescript leads to robust data handling

I have been working on a project using NextJS and Typescript where I need to properly type my MySQL responses. This is the API endpoint I am working with: import { hash } from "bcrypt"; import type { NextApiRequest, NextApiResponse } from "n ...

mysqlnode.jstypescriptnext.js

Using Rxjs to handle several requests with various headers

I have a specific requirement where, if hasProcessado == true, 10 additional requests should be made before issuing the final request. If the final request fails, 3 more attempts are needed. Furthermore, when sending the last request, it is essential to n ...

javascriptangulartypescriptrxjs

Encountering build issues in my next.js application post updating to version 12.#.# and implementing Typescript

In my next.js application, I recently upgraded to version 10 and added TypeScript to the mix. Despite ironing out all issues during development, I encountered errors when running yarn next build due to my use of the keyword interface. ./src/components/ ...

typescriptnext.js

The PUT rest service does not function in AngularJS version 1.0.8

I am facing an issue with my AngularJS application that has a CRUD Rest service. While the Create, Read, and Delete methods are functioning properly, the PUT method is not working. I have searched on Stackoverflow and found similar problems with accepted s ...

javascriptnode.jsrestangularjsexpress

What is the reason `addEventListener` does not work with a class method?

Recently, I discovered that the listener passed to addEventListener can actually be an object with a handleEvent function instead of just a callback function (here). However, I encountered an issue when trying to use handleEvent as a class method: class F ...

javascripttypescript

Is it possible to utilize the expose method to retrieve additional reactive variables and computed properties similar to methods in Vue 3?

Switching my application from Vue 2 to Vue 3 has been quite a journey. I've utilized the Composition API to refactor my previous render function into the setup hook. One interesting discovery was the ability to expose methods using context.expose({}). ...

javascriptvue.jsvue-componentvuejs3

Unable to change the value of Apexcharts components

Utilizing the Vue.js framework along with the Apexchart library, I have been able to create scatterplots for my data. By making use of Axios, I can successfully transmit my data and monitor it using console.log(). With the help of Apexcharts property updat ...

javascriptvue.jsvuejs2vue-componentapexcharts

Sleek transition-ready zoom functionality for THREE JS with clickable controls

Hey there, I've been attempting to animate a transition between scenes in THREE js for quite some time now. I have successfully cleared the scene and recreated the next one, but the transition between them is proving to be quite challenging. I have cr ...

javascriptthree.js

How I am able to access this.state in React without the need for binding or arrow functions

Understanding the concept of arrow functions inheriting the parent context is crucial in React development. Consider this React component example: import React, { Component } from 'react'; import { View, Text } from 'react-native'; i ...

javascriptreactjsreact-nativeecmascript-6arrow-functions

Ensuring Stringency in JQuery's '$' Selector

I have a specific data attribute within the div element that is displayed in the HTML. <div my-custom-attrib="1".../> <div my-custom-sttrib="2"...> Now, in JQuery, I am attempting to filter between the div elements based on the value of the c ...

javascriptjquery

Utilize Google Drive and scripts to incorporate map images into a React application

I'm currently working on setting up an album feature on my react website for a friend, and I would like the images in the album to be linked to a Google Drive so that he can easily upload new images whenever he wants. After successfully inserting the ...

javascriptreactjsgoogle-apicors

I can't believe I already have 111 npm downloads!

Just two days back, I released my initial npm package which is a basic library used to trim and merge audio files. You can check it out here. What surprises me is that it has already garnered 111 downloads even though I haven't promoted it or provide ...

javascriptnpmnpm-installnpm-publish

How to filter an array in Angular 4 without the need for creating a new array and then displaying the filtered results within the same

In my collection of students, I have their names paired with their academic outcomes. studentResults = [ {name: 'Adam', result : 'Passed'}, {name: 'Alan', result : 'Failed'}, {name : 'Sandy', result : &ap ...

javascriptarraysangular

Send various pieces of information using Jquery/Ajax

I have encountered a challenge with my script - it currently only sends one value to the requested URL, but I now need it to handle two values. Unfortunately, I haven't been able to figure out how to do this. Each checkbox on the page is paired with ...

javascriptjqueryajax