Building a Next.js application in a docker container on a local machine using minikube is successful, however, the build fails when attempting to build it on a staging environment

I've encountered a puzzling issue. My next.js app is running in a docker container. It builds successfully on my local Ubuntu machine with minikube and ks8 orchestration, but it gets stuck indefinitely during the build process on the staging setup.

The hangup seems to occur while creating an optimized build...without any visible errors.

To troubleshoot, I cloned the next.js repo, added some console.logs, rebuilt it, and replaced the files in my project's node_modules directory.

Upon closer inspection, it appears that the build process freezes at line 42 in compiler.ts on compiler.ts.

No further logs are generated beyond this point, indicating that the process remains stuck for hours without progress. Unable to determine the root cause.

If there are any webpack or next.js experts out there, your insights would be greatly appreciated.

javascriptnode.jsdockerkubernetesnext.js

Answer №1

If someone encounters similar troubles, I wanted to share some insights that may be helpful.

After researching various articles and questions on StackOverflow and other forums, I discovered that Google's ks8 does not permit importing scss files from outside the project directory. We had common scss files shared among projects stored outside the source code folder. There were directories named my-app and common-sass within the pod, with the source code in my-app importing scss from common-sass.

I resolved this by moving the sass files into the project directory. However, I still encountered issues. It dawned on me that aside from sass files, I was also attempting to access markdown files located outside the project directory, which node.js probably restricted. (This issue did not occur in my local minikube pod)

By relocating all markdown files inside the project directory, I managed to progress past the obstacle. But now an error saying fs not defined surfaced. Further investigation revealed that I could only utilize fs inside getStaticProps.

I resolved this as well. However, a complication arose when one of the packages I am using - next-optimised-images - also uses fs, causing the compiler to flag an error.

While this doesn't completely solve my problem, it provides guidance for others facing similar challenges.

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

We are encountering an issue in Node.js with Mongoose where an instance of TypeError is being received instead of the required string type for the "path" argument

An Error Occurred Connection Successful, Port 4000 Listing Form node:internal/errors:464 ErrorCaptureStackTrace(err); ^ TypeError [ERR_INVALID_ARG_TYPE]: The argument for "path" must be a string. Instead, received a TypeError instance. at new NodeError ...

node.jsexpressmongoosemern

Dealing with errors such as "Failed to load chunk" can be resolved by implementing lazy-loading and code-splitting techniques

Our team is currently working on a Vue.js application using Vue CLI 3, Vue Router, and Webpack. The routes are lazy-loaded and the chunk file names include a hash for cache busting purposes. So far, everything has been running smoothly. However, we encoun ...

javascriptvue.jswebpacklazy-loadingcode-splitting

Enhance your user interface by adding a tooltip above a button

I am currently working on creating a button that can copy content from a variable into the clipboard using TypeScript and Material-UI. Here is what I have tried: const [copySuccess, setCopySuccess] = useState(''); const copyToClipBoard = async ( ...

javascriptreactjsmaterial-ui

The Swiper example is not compatible with the default settings of Next 13

Swiper is not compatible with Next 13. Using the default React example of Swiper + 'use client' at the top of the page does not yield the expected results. To replicate the issue, follow these steps: Create a bare-bones Next 13 app using this ...

reactjsnext.jsswiper.js

Node JS encountered an error: "Error [ERR_HTTP_HEADERS_SENT]: Unable to set headers after they have already been sent to the client."

I'm currently working on implementing authentication in my app, but I keep encountering an error when trying to register a user. The error states that headers cannot be set after being sent to the client, and I'm confused as to why passing throug ...

node.jsexpressserverside-javascriptserver-responsewrap-function

The accumulation of keydown events in VueJs

Currently, I am developing a feature where a <textarea> field starts to fade out as soon as the user begins typing using v-on:keydown. However, if the user continues typing, the fading effect resets to keep the opacity: 1. Unexpectedly, the behavior ...

javascriptvue.jsvuejs2dom-eventskeyboard-events

Utilizing SEO and incorporating special characters like !# in a website's URL

I came across an interesting concept about designing a website that utilizes AJAX to load each page section without compromising SEO. It involved incorporating !# in the URL, similar to the approach adopted by Twitter. However, I've been unable to loc ...

javascripthtmlajaxseo

How to transform multi-dimensional arrays to JSON format using JavaScript (and maybe jQuery)

Currently facing a Javascript dilemma where data storage is essential in the following format: MainArray(Array(JavaScript Object, JavaScript Object, etc etc..), Array(JavaScript Object, JavaScript Object, etc etc..), etc etc..) The main array consists of ...

javascriptjqueryjson

Manage and modify a singular variable using Vercel serverless functions

Working with a client on a static website project using Next.js and hosted on Vercel. The site doesn't require a database, but the client wants to integrate an Instagram gallery on two pages. However, the design is custom, so embedding code won't ...

next.jsenvironment-variablesserverlessvercel

Utilize jQuery to extract data from a JSON object

While I have come across numerous examples of parsing JSON objects in jQuery using $.parseJSON and have grasped the concept, there are some fundamental aspects missing that are preventing me from successfully parsing the following VALID JSON: { "studen ...

javascriptjqueryjson

Guide to sending both JSON data and form data in a single request using Laravel 9

I am working on a form where I need to input multiple images that will be converted into JSON format. The HTML for my form: create.blade.php <form method="post" action="{{ route('m_announcement.store') }}" enctype="mu ...

javascriptphpjsonajaxlaravel-9

What is the best way to extract a value from a JSON object?

I am having trouble deleting data from both the table and database using multiple select. When I try to delete, it only removes the first row that is selected. To get the necessary ID for the WHERE condition in my SQL query, I used Firebug and found this P ...

javascriptjsonnode.jsexpress

How can I display a PHP variable in JavaScript?

I am having trouble displaying a PHP variable in Javascript; Below is the code I am using: <script type="text/javascript> $(document).ready(function (){ var n=<?php echo json_encode($count)?>; for(var i=0;i<n;i++){ var div ...

javascriptphpjqueryhtml

What is the most efficient method for retrieving an element using a data attribute with an object (JSON) value?

Imagine having the following HTML element: <div class='element' data-info='{"id":789, "value":"example"}'></div> By running this JavaScript code, you can access the object stored in the data attribute. console.log($(&apos ...

javascriptjqueryjsoncustom-data-attribute

Angular - Implementing service worker to extract dynamic ID from route in "Notificationclick" event?

I have integrated push notifications into my code to notify users when an action is taken. The backend was developed using lib.net.webpush 3.1.0 with .net 4.5.2 in C#. The notification system is functioning well, but I am facing a challenge: Within my ser ...

javascriptangularservice-worker

Changing the Position of HTML Scripts in React

I am facing an issue where I need to relocate an external script within a specific section of my page. However, I am unable to access the CSS attributes associated with this item. It seems that it is displayed as an iFrame, making it difficult to modify th ...

javascripthtmlcssreactjs

Import MDX metadata in Next.js on the fly

I am currently utilizing Next.js to create a static blog site. Following the guidelines in Next.js documentation, I set up @next/mdx and successfully imported MDX statically using import MDXArticle from "@/app/(article)/2023/test-article/page.mdx&quo ...

javascriptreactjsnext.jsmdx

npm - Configuring the maximum memory usage in npm

I encountered an error message while trying to build my Angular project, The error states: "CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory" I read somewhere that adjusting the max-old-space-size in npm could resolve this issue. How ...

node.jsangularnpm

What steps do I need to take in order to create a Stripe prebuilt page that enables users to choose from a variety of

Currently, I am implementing Next.js and have a business selling packs of credits. The pricing structure is $10 for 10 credits, $20 for 30 credits, and so forth. My goal is to integrate a prebuilt Stripe page that allows users to choose the credit packag ...

next.jsstripe-payments

Why is it that when I refresh the page in Angular, my logged-in user is not being recognized? What could be causing this

I am developing a Single Page Application using the combination of Angular JS and Node JS. In my HTML file, I have defined two divs and based on certain conditions, I want to display one of them using ng-if. However, I noticed that the model value used in ...

javascripthtmlangularjsnode.jssingle-page-application