Incorporating quotes into a unified npm script

I'm trying to merge two npm scripts into one, but the result is incorrect and causes issues with passing flags. I can't use the dotenv package, and using ampersands isn't solving the problem.

Here's what I have in my package.json file -

"define:local": "cross-env NODE_ENV=local FOO=bar BAZ=foo",
"local:dev": "npm run define:local tsnd --inspect --respawn path/to/mycode.ts"

When I execute npm run local, the output in the terminal is 

cross-env NODE_ENV=local FOO=bar BAZ=foo "tsnd" "path/to/mycode.ts"
. This results in the flags not being passed correctly to tsnd, causing issues during local development. Additionally, it puts quotes around the tsnd command and file path inexplicably.

However, if I run local:dev without define:local (e.g., 

tsnd --inspect --respawn path/to/mycode.ts
), the output is 
tsnd --inspect --respawn path/to/mycode.ts
as expected, without any quotes and with the flags included.

Moreover, attempting to use ampersands in the command to combine the two scripts results in the cross-env command failing, and the environment variables aren't defined.

How can I merge these two scripts while preserving the flags and environment variables?

typescriptnpmnpm-scriptsts-node-devcross-env

Answer №1

It is crucial to add -- in order for npm to correctly pass arguments to the command, rather than passing them directly to npm run:

"define:local": "cross-env NODE_ENV=local FOO=bar BAZ=foo",
"local:dev": "npm run define:local -- tsnd --inspect --respawn path/to/mycode.ts",

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

"Error message: TypeORM DataSource encounters a password issue with the client

Here is the content of my data-source.ts file: import {DataSource} from "typeorm"; import path from "path"; import {User} from "./entity/User"; import { config } from "dotenv"; config(); export const AppDataSource ...

typescripttypeorm

Unable to delete event listeners from the browser's Document Object Model

Issue at hand involves two methods; one for initializing event listeners and the other for deleting them. Upon deletion, successful messages in the console confirm removal from the component's listener array. However, post-deletion, interactions with ...

typescriptdomdom-events

Update the image on a webpage by simply clicking on the current image

Hey there, I'm looking to implement a feature where users can choose an image by clicking on the current image itself. Here's my code snippet. The variable url holds the default image. My goal is to make the current image clickable so that when ...

htmlcssangulartypescript

Error in Typescript: The data type 'string | undefined' does not meet the requirements of 'string | number | symbol' constraint

Working with typescript and react. Trying to dynamically adjust font size based on props (xs, sm, md, lg). Attempted using Record but encountering a typescript error. Error message: Type 'string | undefined' does not satisfy the constraint & ...

reactjstypescript

Customizing the appearance of the Material UI MuiClockPicker with unique style

I am wondering how I can override the styles for MuiClockPicker? I discovered that using createTheme to override the styles actually works for me, but I encountered an error from TypeScript: TS2322: Type '{ MuiOutlinedInput: { styleOverrides: { roo ...

typescriptmaterial-uireact-typescript

What are some ways to expand the width of a MaterialUI form control if no value has been chosen?

I am currently working on a project where I need a dropdown menu component with specific selections. However, the layout appears to be cramped and I'm struggling to adjust the width. Additionally, I've been unsuccessful in changing the font size ...

htmlcssreactjstypescriptmaterial-ui

Building a like/dislike feature in Angular

Here is a snippet of code I have that includes like and dislike buttons with font-awesome icons: <ng-container *ngFor="let answer of question.answers"> <p class="answers">{{answer.text}} <i class="fa fa-hand-o-le ...

javascriptangulartypescript

Understanding the concept of inconsistent return points in Typescript: What implications does it carry?

I am currently working on converting a NodeJs JavaScript code to TypeScript. The code snippet below shows how I save uploaded files using JavaScript and now I'm encountering an error when trying to do the same in TypeScript. The error message says "Fu ...

node.jstypescript

An error was encountered at line 52 in the book-list component: TypeError - The 'books' properties are undefined. This project was built using Angular

After attempting several methods, I am struggling to display the books in the desired format. My objective is to showcase products within a specific category, such as: http://localhost:4200/books/category/1. Initially, it worked without specifying a catego ...

htmlangularspringtypescript

Sharing packages within nested scopes

Using @organization-scope/package/sub-package in npm is what I want to achieve. Here is my package.json configuration:- { "name": "@once/ui", ... ... } If I try the following:- { "name": "@once/ui/select-box", ... ... } An error pops up st ...

angularnpmangular5

EmotionJS Component library's Component is not able to receive the Theme prop

I am in the process of developing a component library using Emotion and Typescript. However, I have encountered an issue when trying to import the component into a different project that utilizes EmotionJS and NextJS - it does not recognize the Theme prop. ...

reactjstypescriptnext.jsemotion

Creating a dynamic multi-line list in Ionic application is a breeze!

I'm a beginner in Ionic and I am interested in creating a Multi-line List similar to how we generate list-views in Android with custom views and using an Array of custom objects programmatically. Can Multi-line Lists be generated with data from an Ar ...

angulartypescriptionic-frameworkionic2

Access not granted while utilizing Yeoman for scaffolding an application

Having some trouble setting up a new project with Yeoman and Angular. I've tried running "yo angular" and "yo app", but keep encountering the same error message. Unfortunately, I'm not very familiar with Terminal. Error: EACCES, permission denie ...

angularjsnode.jsterminalnpmyeoman

Combining URL parameters into an object with NestJS's HTTP module

Is there a method for passing URL parameters to the httpService in nestjs? I want to improve the readability of this URL without resorting to Axios as nest has its own HTTPModule. Currently, this is how it looks and functions: const response = await this. ...

typescriptnestjsurl-parametershttpmodule

Is there a way for me to specify the icon that is displayed on npmjs.org for my node package?

Can I customize the icon for my node package to appear on npmjs.org? After reviewing the package.json format and searching for clues, it seems that there is no clear indication on how to do so. npmjs.org also does not provide any guidance on this matter. ...

node.jsnpm

Leveraging React Native to position a view absolutely in the center of the screen without obstructing any other components

How can I center an image inside a view in the middle of the screen using position: "absolute"? The issue is that the view takes up 100% of the width and height of the screen, causing all components underneath it (such as input fields and buttons ...

javascriptcsstypescriptreact-nativeexpo

Using React and Typescript: Populating an array within a For Loop using setTimeout is not happening sequentially or at all

I'm currently working on a function that animates images of random cars moving across the screen. My goal is to stagger the population of the "carsLeft" array using setTimeout, where I will eventually randomize the delay time for each car. Everything ...

reactjstypescriptfor-loopsettimeout

Struggling to create an Extension Method for Map<TKey, TValue[]> in TypeScript

As a new Angular/TypeScript user, I am really enjoying using Extension methods. They work well on standard types, but now I am facing an issue while trying to write one for the Map data structure where values are arrays. Unfortunately, it does not seem to ...

angulartypescriptgenerics

Encountering a problem while trying to launch the development server for a React application using the npm-start

I followed the steps to create a react application using npx create-react-app myapp, but when I use npm start, it fails to start a developer server. Even after trying to reinstall the node_modules, the issue persists. I am using the latest versions of Reac ...

javascriptreactjsnpmnpm-start

Typescript and RxJS: Resolving Incompatibility Issues

In my development setup, I work with two repositories known as web-common and A-frontend. Typically, I use npm link web-common from within A-frontend. Both repositories share various dependencies such as React, Typescript, Google Maps, MobX, etc. Up until ...

typescriptnpmwebpackrxjs