Experiencing a specific build error on cloud build that does not occur during a docker build process

Challenges with gcloud Build

Whenever I try to submit a build using gcloud, I encounter an error. Oddly enough, the build works perfectly fine on my local machine and even when creating a docker image locally. Despite my initial assumption that a file might not be correctly copied into the tarball, my debugging efforts suggest otherwise.

The Error I'm Facing:

An issue arises with the type: 'Service' parameter implicitly has an 'any' type

This problem stems from code resembling the following snippet:

const {
    firestore,
    collections: {
      rentals: { services },
    },
  } = useFirebaseCtx();
const newServiceEvents = services.map((service, index) => {
   ...
})

The function useFirebaseCtx is meticulously typed (without any implicit 'any' types within it)

The variable services is explicitly defined as

Organizations.Rentals.Services.Flat[]

Debugging Attempts So Far

  1. No errors are reported when running

    yarn run eslint . --ext .js,.jsx,.ts,.tsx

  2. No errors occur during the execution of

    docker build -t my-docker-image-name .
    (image builds successfully)

  3. A check with

    gcloud meta list-files-for-upload
    confirms that the type folder is indeed included in the tarball upload

Summarized output of

gcloud meta list-files-for-upload
:

...
types/organizations/index.d.ts <- this is the file containing the type definition
...

Additional Configuration Files

.dockerignore

Dockerfile
.dockerignore
.gitignore
node_modules
npm-debug.log
README.md
.next
functions
fire*
jest*
__tests__

.gcloudignore

.gcloudignore
.git
.gitignore
node_modules
npm-debug.log
README.md
.next
functions
fire*
jest*
__tests__
!.env*
.env.development*

Dockerfile

# Install dependencies only when needed
FROM node:14-alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
# COPY ./private/sitemap/generate-sitemap.mjs ./private/sitemap/generate-sitemap.mjs
RUN yarn install --frozen-lockfile

# Rebuild the source code only when needed
FROM node:14-alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules

ENV NODE_ENV production

# Failing here
RUN yarn build 

# Production image, copy all the files and run next
FROM node:14-alpine AS runner
WORKDIR /app


RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001

# You only need to copy next.config.js if you are NOT using the default configuration
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/.env* ./
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/next.config.js ./next.config.js

USER nextjs

EXPOSE 3000

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry.
# ENV NEXT_TELEMETRY_DISABLED 1

CMD ["yarn", "start"]

Answer №1

Summary

Avoid using the name firebase* for any folder within your src code to prevent issues.

Identifying and Resolving the Problem

The issue stemmed from an internal folder named firebase that was not included in the tarball. Renaming the folder resolved the problem.

Steps Taken to Identify and Solve the Issue

  1. Downloaded the tarball from the cloud console (CLI provided a line)
  2. Navigated into the folder and executed yarn install
  3. Traced the error back to missing folder within src directory
  4. Used
    gcloud meta list-files-for-upload
    in original folder to detect exclusion of files under firebase/*.(ts|tsx). Decision made to avoid naming folders as "firebase".
  5. Successfully renamed the folder.

Potential Alternative Solution

Consider adding the file to .gcloudignore as a non-ignored item.

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

Is there a way to use dot notation in TypeScript for a string data type?

I'm currently in the process of developing a function API with a specific format: createRoute('customers.view', { customerId: 1 }); // returns `/customers/1` However, I am facing challenges when it comes to typing the first argument. This ...

TypeScript Error 2304: Element 'div' is nowhere to be found - CRA TypeScript Template

I'm experiencing a problem in VSCode while working on the default create-react-app my-app --template typescript project. It seems to not recognize any HTML elements, as I keep getting the error cannot find name xxx, where 'xxx' represents th ...

Unable to properly cancel a post request using abort functionality

In the process of building a Next.js app, I encountered an issue with calling a post request. I included a cancel button to halt the post request, and attempted to use abortController in conjunction with Axios (v1.4.0) to achieve this. Even though the &ap ...

Removing an attachment from the attachment object array nestled within a comment object array nested inside another object array

I am currently grappling with the challenge of removing an attachment from an array of attachments within a nested structure of comment objects. Despite several attempts, I have yet to find a solution that works effectively. export class CommentSection{ ...

Having trouble retrieving information from a JSON object? Unable to retrieve property 'company_about' of an undefined object?

Here is the JSON data I have: [ { "id": 1, "job_id": 1, "company_profile": "Sales and Marketing", "company_about": "Established in 1992 , it is a renouned marketing company", "company_product": "Ford,Mustang,Beetle", "key_skills": ...

The Microsoft.Azure.WebJobs.Script encountered an issue while attempting to cast an object of type 'System.String' to type 'Microsoft.AspNetCore.Http.HttpRequest' during the return process

I recently encountered an issue with my Azure Function written in JS that is triggered by the Service Bus and generates files to Blob Storage. When attempting to return an HTTP result, I received the following error message: System.Private.CoreLib: Except ...

Struggling to configure Connected React Router correctly

As I work on updating my React, Redux, and Router versions to incorporate connected-react-router, I've encountered an issue with the root reducer and store creation process. The previous functioning reducer code looked like this: const appReducer = ...

Trouble with Nextjs link not functioning properly with a URL object when incorporating element id into the pathname

Recently I added translations to my website, which means I now need to use a URL object when creating links. Everything has been going smoothly with this change except for one issue: when I try to click a link that points to /#contact. When simply using h ...

What is the best way to incorporate dynamically added scripts into a document using JavaScript

Is there a way to dynamically add a script in document.js? In document.js, there is no access to props. How can a script be conditionally added? import { Html, Head, Main, NextScript } from 'next/document' export default function Document() { ...

The specified type '{ songs: any; }' cannot be assigned to the type 'IntrinsicAttributes' in NEXTJS/Typescript

I am currently working on a straightforward script. Below is the index.tsx file for my Next.js application: import type { NextPage } from 'next' import SongsList from '../components/SongsList/SongsList' import { GetStaticProps } from & ...

Confidently set up a proxy that is recursively nested and strongly typed

I have a collection of objects where I store various content for a user interface. Here is an example: const copy = { header: { content: 'Page Header' }, main: { header: { content: 'Content Subheader' }, body ...

Unable to execute a join operation in TypeScript

I have an array of objects listed below var exampleArray = [{ "isAvailable": true, "receipent": [{ "id": "a6aedf0c34", "receipentName": "ABC" }, { "id": "a6aedbc34" ...

What is the process for generating a dynamic array in typescript?

Looking to create a TypeScript dynamic array with the desired format: const display = [ { id: 1, displayName: "Abc1" }, { id: 2, displayName: "Abc2" }, { id: 3, displayName: "Abc3" } ] Attempted the following code ...

Encountered an issue while trying to install mailcatcher: ERROR: Gem native extension build unsuccessful

Today my docker build suddenly broke with a mailcatcher error. I'm using a Mac M1, and strangely enough, my colleague who is on Linux x86 is facing the same issue since today. The image used in the build is either FROM arm64v8/php:7.4.12-fpm or FROM ...

Tip Sheet: Combining Elements from an Array of Objects into a Single Array

When I invoke the function getAllUsers() { return this.http.get(this.url); } using: this.UserService.getAllUsers().subscribe(res => { console.log(res); }) The result is: [{id:1, name:'anna'}, {id:2, name:'john'}, {id:3, name ...

Managing two subscriptions based on conditions in Angular

I'm currently working on a component that includes the following code snippet: this.service().subscribe((result) => { this.service2(result).subscribe((result2) => //other code }} As I strive to follow best practices in Angular development, I&ap ...

The initial click does not trigger a state update in React

I attempted to create a straightforward system for displaying data with two sorting buttons (ascending & descending). My approach involved fetching and displaying data from an array using the map method. In a separate component file, I utilized useEffect ...

The 'formGroup' property cannot be bound as it is not recognized as a valid property of 'form' in Angular 7

I tried implementing a login feature using web API with Angular 7, but encountered an error when using <form [formGroup]="loginForm" (submit)="loginFormSubmit()">. What could be causing this issue? https://i.sstatic.net/3M2a5.jpg login.component.ht ...

What is the best way to determine the position of a Draggable element in relation to a Droppable element that it is currently hovering over

VIEW IMAGE My Objective: I am working on a project where I need to determine the distance between my draggable element and a droppable target. Specifically, I want to calculate how far away my mouse is from the center, top border, or bottom border of the ...

What is the reason behind permitting void functions in the left part of an assignment in Typescript?

Take a look at this Typescript snippet: let action = function (): void { //perform actions }; let result = action(); What makes it suitable for the TypeScript compiler? ...