Issue with nestjs build due to ts-loader module in dev-dependency

I've encountered a Module Error with ts-loader during a docker build

ERROR [6/6] RUN nest build                                                                                                                                3.9s
------
 > [6/6] RUN nest build:
#10 3.863 ERROR in main
#10 3.863 Module not found: Error: Can't resolve 'ts-loader' in '/user/src/app'
#10 3.863 resolve 'ts-loader' in '/user/src/app'
#10 3.863   Parsed request is a module
#10 3.863   using description file: /user/src/app/package.json (relative path: .)
#10 3.863     resolve as module
#10 3.863       looking for modules in /user/src/app/node_modules
#10 3.863         single file module
#10 3.863           using description file: /user/src/app/package.json (relative path: ./node_modules/ts-loader)
#10 3.863             no extension
#10 3.863               /user/src/app/node_modules/ts-loader doesn't exist
#10 3.863             .js
#10 3.863               /user/src/app/node_modules/ts-loader.js doesn't exist
#10 3.863         /user/src/app/node_modules/ts-loader doesn't exist
#10 3.863       /user/src/node_modules doesn't exist or is not a directory
#10 3.863       /user/node_modules doesn't exist or is not a directory
#10 3.863       /node_modules doesn't exist or is not a directory
#10 3.863
#10 3.863 webpack 5.73.0 compiled with 1 error in 2169 ms

This is the Dockerfile being used

FROM node:18-alpine

ENV TEST_ENV=docker_baap
ENV PORT=3500
WORKDIR /user/src/app
 
COPY . .
RUN npm i -g @nestjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcdfd0d5fc85928c">[email protected]</a>
RUN npm ci --omit=dev
 
RUN nest build
 
USER node
 
CMD ["npm", "run", "start:prod"]

The issue seems to arise from running npm ci --omit=dev, but what steps can be taken to resolve it for production?

Answer №1

Building the application requires dev dependencies, but they are not necessary for running it.

Consider using a multistage docker build approach.

In the initial stage, install all dependencies and compile the application.

For the second stage, only install production dependencies and copy the built application (/dist) from the first stage.

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

How can I incorporate multiple quality sources into a flowplayer using Angular?

Is there a way to add multiple sources with different qualities like 1080p, 720p etc.? Thank you in advance. flowplayer('#my_player', { src: '../assets/videos/video_1080p.mp4', // title: 'This is just demo&apo ...

Before computing the width, Next.js Swiper slide occupies the entire width

Check out the code snippet below: 'use client'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import 'swiper/css/pagination'; export default function Component() { const cards = [{ id: 0 ...

Looking to adjust the height of a foreignObject element within an SVG?

Looking to dynamically change the height of a foreignObject within an SVG, while also needing HTML elements inside it (working with ngx-graph). <foreignObject x="1" y="1" width="335" [height]="foreignObjHeight(node.Dat ...

Problem with custom anchor component in React that needs to perform an action before being clicked

React Component (Custom Anchor) import React from 'react'; class Anchor extends React.Component { onClick = (event) => { // ----------------------------- // send Google Analytics request ...

Angular 7: Show selected value upon clicking Radio button

I am having an issue with a radio button where I need to display a value when it is clicked. For example, when the "weekly" option is selected, I want it to display "Weekly" in the "Selection" element. I have tried to implement this but it is not working a ...

What is the process for extracting Excel .xlsx information from a POST request body in an Express API?

I've created an Angular frontend application that sends an excel (.xlsx) file as form data in the request body to my Express endpoint. Take a look at the function from my Angular service file below: uploadOrder(workOrder: File) { const formData: For ...

Adding elements from one array to another array of a different type while also including an additional element (JavaScript/TypeScript)

I'm having trouble manipulating arrays of different types, specifically when working with interfaces. It's a simple issue, but I could use some help. Here are the two interfaces I'm using: export interface Group { gId: number; gName: st ...

Sending input in a nested event listener

I am currently utilizing Highcharts for the purpose of showcasing an interactive map with custom countries. I have a specific requirement to enable the drilldown functionality, which involves clicking on a country to zoom in on another map displaying inter ...

The challenge of handling Set type in TypeScript errors

I'm currently facing two errors while trying to convert a function to TypeScript. The issue lies with the parameters, which are of type Set import type {Set} from 'typescript' function union<T>(setA: Set<T>, setB: Set<T>) ...

Transforming TypeScript snapshot data in Firebase Cloud Functions into a string format for notification purposes

I've encountered the following code for cloud functions, which is intended to send a notification to the user upon the creation of a new follower. However, I'm facing an issue regarding converting the snap into a string in order to address the er ...

Prerendering Successfully Completed on Initial Page Load, but Encountering 500 Error on Subsequent Visits

To confirm this, please click on the following link to see for yourself: It may be important to note that my application is running in a docker container on port 3000, along with the prerender server which is on port 9000. Both are behind the official Ngi ...

Ways to capture targeted requests

Utilizing NestJS and Angular 2, I have noticed that both frameworks have a similar approach when it comes to working with Interceptors. I am currently looking for the best practice to identify specific requests in order to perform additional tasks. When d ...

Unable to find the locally stored directory in the device's file system using Nativescript file-system

While working on creating an audio file, everything seems to be running smoothly as the recording indicator shows no errors. However, once the app generates the directory, I am unable to locate it in the local storage. The code I am using is: var audioFo ...

What is the best way to enhance a react-bootstrap component with TypeScript?

Currently, I am utilizing <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f1d0a0e0c1b420d00001b1c1b1d0e1f2f5e415f415f420d0a1b0e415e5b">[email protected]</a> and delving into the development of a customized Button ...

Exploring the functionality of CanDeactiveGuard and ModalDialogService through unit testing

In my application, the CanDeactiveGuard is functioning properly. During unit testing, I encountered an issue with one test where I intended to use callThrough to invoke the openConfirmDialog() method within the Guard. This method triggers the Modal Dialog ...

What is the best way to implement a dispatch function in TypeScript?

Despite my expectations, this code does not pass typechecking. Is there a way to ensure it is well typed in Typescript? const hh = { a: (_: { type: 'a' }) => '', b: (_: { type: 'b' }) => '', } as const; ex ...

The function onClick in Chart.js allows for passing the selected object in Typescript

In the documentation for Chart.js, I found a reference to an onClick function that is triggered whenever a click event occurs on the chart. The code snippet provided looks like this: options: { onClick: this.Function } Function(event, array){ ... } ...

Material Design Autocomplete search feature in Angular 2

I'm encountering some challenges with autocomplete in Angular2 Material Design. Here are the issues I'm facing: 1. When I type a character that matches what I'm searching for, it doesn't display in the autocomplete dropdown as shown in ...

Angular5 causing all divs to have click events at once instead of individually triggered

I am a beginner when it comes to working with Angular and I have encountered an issue. I created a click event on a FAQ page in Angular 5, but the problem is that when I click on one FAQ, they all open up instead of just the targeted one. Here is my TypeS ...

Validators in Angular forms are a powerful tool for enforcing

Is it possible to use Validators in the ts.file to display an error message when a field is invalid, rather than directly in the html? Thanks. html <form [formGroup]="form"> <mat-form-field> <mat-label>Nom</mat-label> ...