Error with tsc rootDir due to Docker's installation of yarn in root directory

I am encountering a problem with my node project which serves a simple "hello world" server. Everything runs smoothly when I run it locally, but when I try to run it inside Docker, a /opt/yarn-v1.21.1 folder is created which leads to a rootDir error:

error TS6059: File '/opt/yarn-v1.21.1/bin/yarn.js' is not under 'rootDir' '/opt/src'. 'rootDir' should contain all source files.

This is what my Dockerfile looks like:

FROM node:13.8.0-alpine

WORKDIR /opt

COPY package*.json ./
COPY tsconfig*.json ./

RUN npm i --quiet

Here's the snippet from my tsconfig file:

{
    "compilerOptions": {
        "target": "es5",                          
        "module": "commonjs",                    
        "lib": ["es6"],                     
        "allowJs": true,
        "outDir": "dist",                          
        "rootDir": "src",
        "strict": true,         
        "noImplicitAny": true,
        "esModuleInterop": true,
        "resolveJsonModule": true,
    },
}

And here's a section from my package.json file:

{
    "name": "test-api",
    "scripts": {
        "dev": "tsc",
        "start:dev": "tsc && concurrently \"tsc -w\" \"nodemon dist/app.js\""
    },
    "dependencies": {
        "@types/node": "^13.7.0",
        "concurrently": "^5.1.0",
        "nodemon": "^2.0.2",
        "typescript": "^3.7.5"
    }
}

I would appreciate any insights as to why this discrepancy occurs when running the project through Docker. My initial thought was that yarn might already be installed on my system, but docker creates it within the image by default.

Changing the rootDir from /src to ./ resolves the error, but it results in the following output structure in the dist folder:

dist
  src
    app.js
  yarn-v1.21.1

Instead of the desired structure:

dist
  app.js

Answer №1

To improve your Dockerfile, make sure to update the WORKDIR command as shown below:

WORKDIR /app

The base image comes with yarn pre-installed in the /opt directory. If you place your app in the /opt folder as well, it may cause confusion and lead to errors. Consider using WORKDIR /opt/app if you prefer to keep your app under /opt.

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 optimize app speed in Angular2 by importing CommonModule and RouterModule in a centralized location?

I find myself constantly importing these two modules in almost every component: import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; Is there a way to import them only once in the global app. ...

The data type 'boolean' cannot be assigned to the type 'StoryFnReactReturnType' in a React Storybook project using Typescript

I am currently working on setting up a Button component with Storybook in typescript. I am referencing The Documentation and using this specific example. Below is my Component and its story: components/Button.tsx: import {FC} from 'react'; exp ...

What is the method to determine the length of a string with TypeScript?

Looking to derive the numerical length of a string: type Length = LengthOfString<"hello"> // ^? should equal 5 Feeling a bit lost on how to approach this. Any guidance on how to achieve this? (Currently diving into typescript's typ ...

What is the best way to access automatically generated JavaScript variables in TypeScript?

I am currently facing an issue with integrating a Google login API in my React project and I need some help. The problem arises when the user already has an active session, rendering the API unnecessary. The Javascript solution provided is as follows: co ...

An error occurs when attempting to redirect with getServerSideProps

When I am logged in, I want to redirect to the /chat page using auth0 for authentication. The error seems to be related to returning an empty string for props, but it does not impact the website as redirection works correctly. The main issue here is the in ...

Could you please tell me the type that is returned by the createClient function?

Despite being a TS newbie, I have been delving into writing small services using TS. Recently, I've been developing a CLI tool that leverages the power of node-redis, which is an exceptional redis client. The burning question on my mind is regarding ...

Displaying object properties in React and rendering them on the user interface

Within my React application, I am retrieving data from an API using the following code snippet: function PlayerPage() { interface PlayerDataType { id: number; handle: string; role: string; avatar: string; specialAbilities: null; s ...

Unable to create symbolic link when installing a node module in Docker on Windows leads to failure

I am encountering an issue with my nodejs docker instance running on Windows. I have linked a write-enabled windows directory to the docker instance and I am attempting to install shelljs into my project. However, the installation is failing with the follo ...

Combine two arrays of data sources

mergeThreads() { const userId = this.auth.getUser().uid; const buyerThreads$ = this.afs.collection('threads', ref => ref.where('buyerId', '==', userId)).valueChanges(); const sellerThreads$ = this.afs.collection ...

Effortlessly bring in Typescript namespace from specific namespace/type NPM package within a mono-repository

Instead of repeatedly copying Typescript types from one project to another, I have created a private NPM package with all the shared types under a Typescript namespace. Each project installs this NPM package if it uses the shared types. index.d.ts export ...

What could be causing ESLint to run on its own configuration file while working with Typescript?

I have files named .eslintignore and eslintrc.js in close proximity. The contents of my ignore file are as follows: .eslintrc.js dist/* node_modules/* out-tsc/* However, when I access the eslintrc.js file, an error is triggered: Parsing error: ESLint was ...

Is there a way to ensure my custom tslint rule is compatible with the exact version of the TypeScript module being used by tslint?

I seem to be missing something crucial, but I can't pinpoint the issue. Within my custom rule, I am utilizing the SyntaxKind of a Node for controlling my flow, as shown below: import * as ts from "typescript" function processPropertyName(pn: ts.Pro ...

What could be the reason for the Angular2 Component property not appearing on my webpage?

Here is the code snippet I am working with: import {Component} from "@angular/core"; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{secondTitle}}</h2> <main-page></ma ...

Using Typescript to define the type for React's useState() setter function whenever

I'm working on setting up a React Context to handle parameters mode and setMode, which act as getter and setter for a React state. This is necessary in order to update the CSS mode (light / dark) from child components. I'm encountering a Typescr ...

Angular 13: How to Handle an Empty FormData Object When Uploading Multiple Images

I attempted to upload multiple images using "angular 13", but I'm unable to retrieve the uploaded file in the payload. The formData appears empty in the console. Any suggestions on how to resolve this issue? Here is the HTML code: <form [formGro ...

How can we effectively transfer a value from TypeScript/Angular?

I am new to TypeScript and Angular, and I'm struggling with assigning a value to a variable within a function and then using that value outside of the function. In regular JavaScript, I would declare the variable first, define its value in the functio ...

Implementing asynchronous validation in Angular 2

Recently started working with Angular 2 and encountered an issue while trying to validate an email address from the server This is the form structure I have implemented: this.userform = this._formbuilder.group({ email: ['', [Validators.requir ...

Typescript enhances React Native's Pressable component with a pressed property

I'm currently diving into the world of typescript with React, and I've encountered an issue where I can't utilize the pressed prop from Pressable in a React Native app while using typescript. To work around this, I am leveraging styled comp ...

Having trouble deleting JavaScript object properties within a loop?

Struggling to comprehend the behavior of this particular piece of javascript code. const devices = searchResult.results.forEach(device => { const temp = Object.keys(device.fields); for(var property in temp) { if(device.fields.hasOwnPro ...

find all the possible combinations of elements from multiple arrays

I have a set of N arrays that contain objects with the same keys. arr[ {values:val1,names:someName},   {values:val2,names:otherName}, ] arr2[   {values:valx,names:someNamex}, {values:valy,names:otherNamey}, ] My goal is to combine all possible c ...