Is there a way to fetch the version of my npm application without pulling in additional package.json details?

I am working on a Single Page Application (SPA) using React and built with Webpack as part of create-react-app. In my application, I display the version number fetched from package.json like this:

import npmInfo from 'package.json'
...
<div className="version">{npmInfo.version}</div>

However, including the whole package.json file in the built javascript exposes more information than necessary to the public.

Is there a way to only extract the version number from package.json without resorting to setting it as an environment variable or accessing it through process.env.VERSION?

Answer №1

It's uncertain whether this solution will address your issue, especially if you have reservations about utilizing environment variables. However, if your application is executed or built using an npm script, you may be able to leverage process.env.npm_package_version.

Please note that this option is only applicable when employing npm scripts.

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

"Experience the new Bootstrap 5 feature: Off-Canvas sliding from left to

I encountered the code snippet below on the official bootstrap 5 demo. Despite my efforts, I am struggling to figure out how to relocate the off-canvas menu from Left-to-Right. The divergence between the documentation code referencing offcanvas-start and t ...

What is the best way to refresh grunt devDependencies?

As a newcomer to grunt, I am still getting the hang of node. In all my projects, I have a standard Gruntfile and package.json that I tweak as needed. However, every time I start a new project, I find myself needing to update all the Grunt plugins in devD ...

Creating resizable rows of DIVs using jQuery

I'm currently developing a scheduling widget concept. The main idea is to create a row of DIVs for each day of the week. Every row consists of a set number of time periods represented by DIVs. My goal is to enable the resizing of each DIV by dragging ...

Tips for managing and identifying canceled requests in an Angular HTTP interceptor

Having trouble handling cancelled requests in my http interceptor. Despite trying various methods from SO, I can't seem to catch it. Here is an example of how my interceptor looks: public intercept(req: HttpRequest<any>, next: HttpHandler) { ...

Is it possible to identify the origin URL of a user using Javascript or AngularJS?

Is it possible to use Angular to detect the origin URL of a user visiting my website in order to perform specific operations later on? ...

The HTML5 range input is consistently defaulting to the minimum value and is not triggering the onChange event for text input

My goal is to implement a feature where an input type text is used along with an input type range with three specific use cases: 1. Default case: When the page loads, the slider should point to the value specified in the text input field. 2. When a user e ...

Is there a variance in outcomes between constructing a pattern with a string and constructing a pattern with a regular expression "literal" in JavaScript?

Are there any distinctions between using RegExp literals versus strings? http://jsfiddle.net/yMMrk/ String.prototype.lastIndexOf = function(pattern) { pattern = pattern + "(?![\s\S]*" + pattern + ")"; var match = this.match(pattern); ...

jQuery does not change the scroll position of elements

I'm looking to implement a feature on my website where certain points act as "magnets" and when the user is near one of these points, the window automatically scrolls to the top. I found a jQuery plugin that does something similar which you can check ...

Addressed all 86 vulnerabilities out of 1929 scanned packages, with 86 vulnerabilities needing manual review and unable to be updated

When I created a new react project, I encountered the following message: found 86 vulnerabilities (82 moderate, 4 high) run `npm audit fix` to fix them, or `npm audit` for details After running "npm audit fix," this was the result: fixed 0 of 86 vulnera ...

Query about Javascript/Node/JSON - why isn't this functioning properly?

I thought I had a good grasp on what I was doing until the process started getting jumbled. My code is being executed through Node, not a web browser. For some reason, it jumps to the prompt at the end of the while loop first and I'm not sure why tha ...

The margin persists despite the usage of the * selector and !important declaration

I'm currently working on a website built upon this template: https://github.com/issaafalkattan/React-Landing-Page-Template My issue arises when trying to remove margins in multiple sections. For instance, I want to eliminate the 'orange' ar ...

Is it acceptable to incorporate Node.js modules for utilization in Next.js?

Here's a funny question for you. I am trying to generate UUID in my Next.js project without adding any unnecessary packages. So, I decided to import crypto in my component like this: import crypto from 'crypto'; After importing it, I used i ...

Even with the use of setTimeout, Angular 5 fails to recognize changes during a lengthy operation

Currently, I am facing an issue with displaying a ngx-bootstrap progress bar while my application is loading data from a csv file. The Challenge: The user interface becomes unresponsive until the entire operation is completed To address this problem, I a ...

Steps for adding a PHP dropdown menu to an HTML/Javascript webpage

Hey there, this is only my second post and I have to admit that I am a newbie in the world of web development. I'm spending countless hours scouring different websites for guidance, and I'm finally starting to grasp some concepts (at least for no ...

Use Javascript or Jquery to dynamically change the background color of cells in HTML tables based on their numerical

I am working with a collection of HTML tables that contain numbers presented in a specific style: <table border="1"> <tr> <th>Day</th> <th>Time</th> <th>A</th> <th>B</th> &l ...

Setting bootstrap datetimepicker values dynamically from a variable

I'm trying to utilize the inline bootstrap datetimepicker from At the moment, it opens in a popup window after the user selects a date/time from a table on another page. My goal is to pass the date/time from that page into datetimepicker and have it ...

Developing Angular 2 custom async validators for use in reactive forms

I am currently working on a reactive form that requires unique form controls: this.form = new FormGroup({ name: new FormControl(this.initialValue, [ Validators.required, ], this._uniqueNameValidator.bind(this)), }); To achieve this, I have create ...

What is the best way to send the totalAmount data from one child component to its parent, and then pass it on to another

I am facing an issue with passing the totalAmount data from cart.js to the parent component (app.js) and then further to another child component (info.js). Despite my attempts, it seems like I am unable to pass it correctly as I encounter the following err ...

The delete functionality seems to be malfunctioning within Postman

const express = require("express") const app = express() app.use(express.json()) const usersList = [{id :1,name:"naser",age:26},{id :2,name:"mosa",age:46}]; app.post('/users',(req,res)=>{ const newUser = re ...

What is the process of combining JS functions with PHP echo in code?

I am currently working on creating a popout menu for an array of values that are being displayed from the database. The goal is to show the corresponding popout menu when the svg is clicked, but I am running into an issue where it only works for the first ...