Issue encountered while deploying on vercel: TypeError - Trying to access properties of undefined (specifically 'and')

Encountered this issue during deployment on Vercel. Npm run build did not show any errors.

Configuration : "node": "18", "next": "^14.0.0", "next-transpile-modules": "^9.1.0",

An error occurred during the build
TypeError: Cannot read properties of undefined (reading 'and')
    at Object.webpack (/vercel/path0/node_modules/next-transpile-modules/src/next-transpile-modules.js:206:60)
    at getBaseWebpackConfig (/vercel/path0/node_modules/next/dist/build/webpack-config.js:1713:32)
    ... 

Unclear about the source of the error, as everything was functioning correctly previously

Here is my next.config.js : const withTM = require("next-transpile-modules")(["gsap"])

module.exports = withTM({

  images: {
    domains: ["res.cloudinary.com"],
    loader: "cloudinary",
    path: "https://res.cloudinary.com/",
  },
  i18n: {...}
})

The section causing the error :

if (nextCssLoader) { nextCssLoader.issuer.or = nextCssLoader.issuer.and ? nextCssLoader.issuer.and.concat(matcher) : matcher; delete nextCssLoader.issuer.not; delete nextCssLoader.issuer.and; } else { console.warn('next-transpile-modules - could not find default CSS rule, CSS imports may not work'); }

Answer №1

After updating next-transpile-modules to version 10, the issue was resolved for me.

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

Tricks for displaying a dynamic object tooltip in Three.js

Can anyone help me figure out how to create a HUD hint effect for a moving object? I envision something like this: An asteroid is floating through space, and when I click on it, a hint box with information pops up. I've been playing around with thi ...

Developing a sliding menu with AngularJS

Currently, I am developing an AngularJS application. One of the features I am working on involves having a menu at the top of my page that, when an item is selected, will slide down to reveal content specific to that selection in the same area as the menu. ...

What is the conventional method for incorporating style elements into Vue.js components?

Imagine I have a Vue component with data retrieved from an external API, containing information about various books: data: () => ({ books: [ {name: 'The Voyage of the Beagle', author: 'Charles Darwin'}, {name: &ap ...

What is the best way to customize the source code within node modules dependencies?

Hello everyone! I'm facing a challenge with my project. I'm trying to make changes to the code of a component from a UI library, such as Semantic-UI or Material-UI. Currently, I am directly editing the code within the node_modules folder. However ...

Only perform the Rails ajax call once initially

I'm currently working on creating a drop down menu that contains a substantial amount of content, and I would like to use an ajax get call to load everything upon mouse enter. Here is my code written in coffeescript: class @SecondaryMenu construct ...

Checking Sudoku Solutions on Codewars

I have come across this JavaScript code which seems to be functioning correctly. However, I am curious about the line board[3][8] != board[8][3] and how it checks for repeating row and column numbers. Can someone please provide an explanation? Thank you! ...

JEST does not include support for document.addEventListener

I have incorporated JEST into my testing process for my script. However, I have noticed that the coverage status does not include instance.init(). const instance = new RecommendCards(); document.addEventListener('DOMContentLoaded', () => ...

Asynchronous Await Eagerly Anticipates Promise Status: <awaiting

Struggling to implement async/await in an express route and encountering issues. Despite referencing various SO posts, it seems like my implementation is correct. Helpers: module.exports = { facebook: function(userId, token) { return new Promise(re ...

Need to redirect all routes in nextjs when using i18n except for one specific route? Here's how you

Just a quick note: I have already gone through the suggested similar questions before posting. I am looking to perform a complete redirection of ALL app routes (which are localized through next's i18n config), including nested routes. from: /route/s ...

Click a button to adjust the height of an element

My webpage features a dashboard with tabs on the left and corresponding content on the right. To ensure proper alignment, I have utilized Bootstrap to create two columns - one for the tabs and one for the content. However, I am facing an issue where the bo ...

HTML and Javascript Form Integration for Sage Pay Purchase Button

Currently, I am working on a project that includes online payment options via PayPal and Google Wallet, with a "buy now" button. Now, my next step is to incorporate the Sage Pay "buy now" button onto the website using HTML and JavaScript. Although I have ...

Guide on including a controller in an AngularJS directive

Does anyone know how to include a controller from one AngularJS directive into another directive? Here's an example of the code I have: var app = angular.module('shop', []). config(['$routeProvider', function ($routeProvider) { ...

Nested asynchronous mapping in Node.js involving multiple HTTP requests

Currently, I am attempting to iterate through an array of URLs and retrieve responses from a specific set of URLs. The goal is for the outer loop to only proceed after all inner requests have been completed, resulting in the desired outcome as shown below: ...

How can I retrieve the value of a specific <span> element by referencing the class of another <span> within

I have come across the following HTML: <div class="calculator-section"> <p> <span class="x"></span> <span class="amount">30</span> </p> <p> <span class="y"></span ...

JavaScript code for displaying mouse positions and Geolocation using OpenLayers, along with a Geocodezip demonstration

I have attempted to merge Geolocation and Mouse Position Display (longitude/latitude; outside of map) from the OpenLayers and geocodezip site, but I am facing issues. The Mouse Position Display works correctly, however, Geolocation does not seem to work. U ...

Various redirects based on multiple referrers

Here is the code I have for redirecting based on the referer: document.addEventListener('DOMContentLoaded', function() { console.log(isMobile); var referrer = document.referrer; if(referrer.indexOf('site1.com') !== -1 || referrer ...

What could be causing the continuous re-rendering of the layout in Next.js?

I am currently exploring the concept of persistent layout examples as demonstrated in the official docs and also in this article by Adam Wathan. Here's what I have gathered so far: I understand React's reconciliation process, where if the virtu ...

The best practices for managing item spacing in React or React Native

I am facing some challenges while trying to adjust the spacing of my components. My goal is to have the grid occupy 90% of the screen, with the gear icon taking up the remaining 10% <View style={{ paddingLeft: insets.left, padding ...

Is there a way to retrieve localStorage setItem after an hour has passed?

When the user clicks on the close icon, the notification screen disappears. How can I display the same screen to the user again after an hour? Please provide guidance. const [hideLearningMaterialClosed, setHideLearningMaterialClosed] = useState(false) ...

What is the best approach for loading an image from a node_module in a Next.js project?

After integrating a new module into my project that includes an <img /> tag, I encountered an issue with Next.js not rendering the image correctly. The current display of the image in the module looks like this: <img src="[Object Object]" ...