GitLab's CI/CD pipeline is unable to detect ts-node even though it has already been

As a newcomer to setting up GitLab CI, I am currently venturing into implementing a small web application using the MERN pipeline (MongoDB, express, react, Nodejs). My goal is to create a simple project akin to google drive where users can store and manage their files online. Here's the breakdown of my project structure:

View project structure

So far, I have configured unit tests for the backend using Jest and super test. I've installed all necessary packages and set up jest.config.ts for compiling typescript tests. However, I encountered an issue where the test file couldn't detect my installed jest if I only performed npm install for required packages in the backend folder. To address this, I ended up installing all required packages for testing in both the root folder and the backend folder. Below are the packages used:

cloud_todo/package.json:

{
  "dependencies": {
    "supertest": "^6.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.22.1",
    ...
}

cloud_todo/backend/package.json:

{
  "name": "backend",
  "version": "1.0.0",
  ...
}

cloud_todo/backend/jest.config.ts:

/*
 * For a detailed explanation regarding each configuration property...
 */

export default {
  coverageProvider: "v8",
  ...
};

With the backend unit tests functioning well locally, I proceeded to set up a GitLab CI/CD pipeline with the following yml file:

cloud_todo/.gitlab-ci.yml

image: node:latest

stages:
  - npm
  - test

npm:
  stage: npm
  ...
}

test:
  stage: test
  ...

Despite these efforts, my pipeline kept throwing the same error message:

$ cd backend
$ npm test
...
Error: Cannot find package 'ts-node' imported from ...
Cleaning up project directory and file based variables...
ERROR: Job failed: exit code 1

I tried multiple solutions like installing ts-node in the script and changing docker images, but none worked. I also experimented with various tips found online, but they didn't provide a solution specific to my project.

Answer №1

To efficiently pass the installed node_modules between jobs, it is recommended to use cache rather than artifacts. This way, you can eliminate any artifacts-related configurations from the npm job.

Additionally, ensure that the cache is properly defined in both jobs or at a global level to apply it across all jobs.

Furthermore, given that there are multiple node_modules folders and your tests may require all of them, the error you're encountering is likely due to only specifying the path to the node_modules in the project root, but not in the backend folder.

You can rectify this by adjusting the configuration as follows:

image: node:latest

cache:
    paths:
      - node_modules/
      - backend/node_modules
      - frontend/node_modules    

stages:
  - npm
  - test

npm:
  stage: npm
  script:
    - npm install
    - cd backend
    - npm install --legacy-peer-deps
    - npm i ts-node -D --legacy-peer-deps
    - cd ..
    - cd frontend
    - npm install --legacy-peer-deps

test:
  stage: test
  script:
    - cd backend
    - npm test

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

Using Typescript with Gulp 4 and browser-sync is a powerful combination for front-end development

Could use some assistance with setting up my ts-project. Appreciate any help in advance. Have looked around for a solution in the gulpfile.ts but haven't found one yet. //- package.json { "name": "cdd", "version": "1.0.0", "description": "" ...

A function that retrieves an array containing each individual element from a multi-dimensional array

In my system, I have two essential objects: Order and ProductOrder. Order Object: { id:number; productOrders: ProductOrder[]; } ProductOrder object: { id: number; productName: string; } Currently, I store an array of Order objects in a variable called o ...

Create an interface that adheres to the defined mapped type

Working on a typescript project, I have defined the mapped type GlanceOsComparatorV2 interface DonutData { label: string; value: number; } interface ProjectMetric { value: number; } enum ZoneMetricId { ClickRate = 'clickRate', } enum Pa ...

Update the input field's placeholder with the current date

Is it possible to dynamically set the placeholders for <input type='date' placeholder='{{ 'currentDate' }}'>? I have tried using the following variable: currentDate = this.datePipe.transform(new Date(), "yyyy-MM-dd& ...

Tips for retrieving Angular routing data from external sources outside of an Angular application

Is there a way to automatically generate a sitemap for each module during build time? The project structure is as follows: - cli - client -- Module A -- Routing A -- Module B -- Routing B -- Module C -- Routing C - server I am ...

Click on the button to sort Angular data

Greetings! I am a newcomer trying to grasp the concepts of angularjs/typescript. I have compiled an array of fruits, displayed in an unordered list. My goal is to arrange them in descending order and implement a reverse search function to display the item ...

Tips for customizing the color scheme of background, rows, row selection, and headers in Angular 4 using Bootstrap 4 data tables

I've integrated Bootstrap 4 data table in my Angular 4 project, but I'm struggling to customize row colors, row selection colors, and header colors. You can check out the example of the data table I'm using at this link: https://github.com/ ...

Within the realm of Ionic/Angular2/AngularFire2, when a Firebase query is conducted and an array is present, the returned value

The following code snippet is designed to retrieve an object from Firebase, specifically an array. this.item2 = this.af.object('/profiles/' + this.username + '/followers'); this.subscription5 = this.item2.subscribe(item => { ...

What is the best approach to develop a React Component Library adorned with Tailwind CSS and enable the main project to easily customize its theme settings?

Currently, I am in the process of developing an internal component library that utilizes Tailwind for styling. However, a question has arisen regarding how the consuming project can incorporate its own unique styles to these components. Although I have th ...

The ThemeProvider from @emotion/react is not functioning properly

Operating System Information: Macbook Pro (M1 Pro) running Monterey 12.1 Library Version Information: React: 17.0.2, @emotion/react: 11.7.1, @emotion/styled: 11.6.0 Hello everyone, I am encountering an issue. When I use styled-components, everything wor ...

What is the best way to showcase column data in a React table when the data within the column is an array of objects?

Utilizing a react table to showcase a data table. In the tags column, the goal is to display all tags present in the tags array of objects. Despite several attempts, no success has been achieved yet. Being new to working with tables, any guidance on a more ...

Is it possible for NodeJS to prioritize IPv6 DNS lookups as the default option?

In my work with multiple TypeScript (NodeJS 14) client applications that are all Dockerized, I primarily use axios for most HTTP requests. However, there are other tools used as well. Typically, DNS queries default to resolving IPv4 addresses, resulting i ...

Could a variable (not an element) be defined and controlled within an Angular 2 template?

For instance, envision a scenario where I have a series of input fields and I wish to assign the 'tab' attribute to them sequentially as we move down the page. Rather than hard-coding the tab numbers, I prefer to utilize a method that automatical ...

Is it possible to prevent casting to any by improving type definitions?

My query can be best elucidated with the following code snippet. The comments within the code aim to provide clarity on the nature of the question. type MediaFormats = "video" | "audio"; type IMediaContent<TType extends MediaFormats, TValue> = { ...

Changing the mouse cursor dynamically with Angular programming

What is the recommended approach for changing the mouse cursor programmatically in Angular? For instance: HTML: <div [style.cursor]="cursorStyle">Content goes here</div> or <div [ngStyle]="{ 'cursor': cursorStyle ...

Error TS2304: The identifier 'Map' cannot be found in version 5.1.0 of Node.js, TypeScript version 1.6.2, and WebStorm 11

While utilizing the filewatchers in my WebStorm 11, I encountered a TS2304 error related to ts-compiler 1.62. The error message reads: TS2304: Cannot find name 'Map' By deactivating the filewatcher and running the command tsc --target es6 app ...

Avoid triggering the onClick event on specific elements in React by utilizing event delegation or conditional rendering

programming environment react.js typescript next.js How can I prevent the onClick process from being triggered when the span tag is pressed? What is the best approach? return ( <div className="padding-16 flex gap-5 flex-container" ...

The pagination feature in ag-grid is malfunctioning, causing it to initially send a request to

Upon clicking the search button, a server call will be made to retrieve results and display them in the ag grid. The server will only return the specified number of records based on the pagination details provided with each click. Despite implementing the ...

Steps for integrating .web extension files in React Native Web using Typescript

When using react native web, there is a potential to utilize files with extensions such as .web and .android. For example: myFile.web.js myFile.android.js These files can then be included like so: import myFile from './myFile'; React Native w ...

Learn how to dynamically disable unchecked checkboxes and apply specific CSS classes to checked checkboxes in Angular 12 with TypeScript

Currently, I am working on a project where I have successfully stored checkboxes dynamically using a JSON array of objects. However, I am facing an issue that requires your expertise. My goal is to allow the selection of only 5 checkboxes. Once this limit ...