Utilizing webpack 4's JSON tree-shaking functionality for keys that include the hyphen character

I need assistance with utilizing webpack 4's JSON tree-shaking feature as I am encountering a hurdle.

Here is an example of some functional code:

import { accessibility_16 } from '@collab-ui/icons/data/iconsData.json';

console.log("accessibility_16:", accessibility_16);

iconsData.json contains extensive data, but thanks to webpack, only the relevant code related to accessibility_16 is included in the final bundle (when using webpack -p). The challenge arises when there are keys in the JSON file that are not valid JavaScript identifiers, such as arrow-circle-down_16.

import { arrow-circle-down_16 } from '@collab-ui/icons/data/iconsData.json';

The code snippet above is invalid.

How can I import arrow-circle-down_16 while still taking advantage of JSON tree-shaking?

Thank you!

javascriptjsonwebpack

Answer №1

After some searching, I have managed to figure out how to write the code to achieve my desired functionality thanks to a helpful GitHub issue. However, I am unsure about its long-term sustainability:

import * as json from "@collab-ui/icons/data/iconsData.json";
const path = json["arrow-circle-down_16"];
console.log("arrow-circle-down_16:", path);

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

Synchronously retrieving JSON data from a URL using JavaScript

I'm currently working on extracting the title of a YouTube video using jQuery to parse JSON. The issue I am facing is that it works asynchronously, resulting in the answer being displayed after the page has already loaded. Here's the current resu ...

javascriptjqueryjsonsynchronous

Combining XML files with jQuery

Can multiple XML documents be merged into a single file (named newResult) using jQuery or pure JavaScript? I need to combine various hosted XML documents into one file, for reasons beyond my control. I have tried different techniques but haven't foun ...

javascriptxmlajaxjquery

Having Trouble Retrieving JSON File in Python with urllib.urlopen

Attempting to execute the following sequence of commands in Python: url = "http://www.bom.gov.au/fwo/IDV60701/IDV60701.9536.json" response = urllib.urlopen(url) print response.read() Results in the output below: <HTML><HEAD> <TITLE>Acc ...

pythonjsonpython-2.7

The local server for handling HTTP requests has ceased to operate

Recently, I set up the NPM package along with the http server within the "server" directory. Initially, everything was functioning smoothly; however, the server abruptly ceased operating. Upon attempting to launch the local http server, an error message a ...

javascriptnode.jshttpnpmserver

How can I handle returning different types of Observables in my Angular application?

I can't seem to get an observable to return properly. The mergeMap function inside my code doesn't appear to be executing at all. Here are the relevant snippets of code: book.service.ts import {HttpClient, HttpHeaders} from '@angular/comm ...

javascriptangularobservable

Improving data in a table using ajax and JQuery

I am currently working on updating a table utilizing data from AJAX/JSON. Below is my JQuery code: Adjusted to simplify execution with functions. $(document).ready(function() { //var userid = $( ".migrating" ).data( "userid" ); function ajaxUpda ...

javascriptphpjqueryajax

Discovering the method to retrieve the value of an array in JavaScript

Currently, I am developing an Android application in Titanium Studio with a Rest API (Apigee Baas) as the backend. The data stored in the Apigee Baas includes fields such as name, address, and attendance records. When retrieving the response from the Rest ...

javascriptjsontitanium

The identification of the field is not being transmitted by ng-select

Looking for help with Angular! I have an ng-select box where I can choose countries, and it's working fine when I select an option and submit - it submits the id as expected. However, when pre-populating the ng-select with data and submitting, it&apos ...

javascripthtmlangulartypescript

Populate the label text within a Gridview by parsing JSON data through AJAX

I am currently working with a grid view that obtains data from a vb.net class object. The gridview contains a TemplateField with a label control, as shown below: ...

jqueryjsonajax

The functionality of the code in a stack snippet may differ from that in a standalone HTML file

My code works perfectly on a stack snippet, but when I insert it into my server or an .html file, the refresh button shrinks! I have copied and pasted the code exactly as it is. Are there any specific snippet features that need to be added for it to work, ...

javascriptjqueryhtmljquery-bootgrid

Include the url of the html file in your JavaScript code

I have a piece of code that I want to include in my JavaScript instead of HTML. The code is as follows: <script async src="https://www.googletagmanager.com/gtag/js?id=ID"></script> Since all my functions are written in JavaScript, I ...

javascripthtml

How to trigger a JavaScript function using a button click

I've been struggling to figure out why my JavaScript code isn't functioning properly within Ionic. Can anyone guide me on how to store a number in a variable, display that variable, and increment it when a button is clicked? I have successfully ...

javascripthtmlcss

Could ProtoRPC API be considered the default AJAX solution provided by GAE?

Looking ahead: developing an ajax interface for a gae/py application. Currently, my app has a basic html version that communicates with the datastore and updates the page each time. While it works fine, now it requires ajax functionality. I've experi ...

ajaxjsongoogle-app-engineknockout.jsprotorpc

A function that listens for the onmouseover event and updates the image source of an HTML img element

I have created a function that positions my objects based on the array they are assigned to. For example, if they are in players[0], they will be placed in one position, and if they are in players[1], they will be placed elsewhere. The X and Y values are ...

javascripthtmlcss

Display user profile pictures from Vue.js in the Laravel public directory

I have been working on implementing a commenting system and recently incorporated vue.js into my laravel project. One of the features I want to include in my comment area is displaying user profile images from the laravel public folder. However, I am u ...

javascriptphplaravelimagevue.js

Implementing promise-based looping for multiple GET requests in node.js

As a newcomer to promises, I've been searching for the right answer or pattern without much luck. Currently using node.js v4.2.4 and exploring The task seems simple enough... I need to execute multiple asynchronous blocks in a specific order, with on ...

javascriptnode.jsasynchronousftppromise

Tips for managing the background color of a box when the function is constantly refreshing in Internet Explorer

function process(Objects) { var objectId = Objects; displayContent(objectId); } function displayContent(objectId) { var boxId = objectId.id; var color = ret ...

javascriptjqueryhtmlcss

Webpack manages to completely bypass the Express routing system entirely

I've been following an amazing tutorial here: and attempting to expand upon it by introducing a new page to be served through a different route. However, after spending hours trying different things, I've come to the realization that create-reac ...

node.jsexpresswebpack

When passing the value of "undefined" into a function, keep in mind that the function must be declared in a separate JavaScript file. This

I'm facing an issue with my JavaScript code. I have a file named test.js that contains a function like this: export const a = (data) => { console.log(data) } In addition, I have a functional component called File.js as shown below: import Reac ...

javascriptnode.jsreactjsreact-nativereact-hooks

A guide on iterating through an array in vue.js and appending a new attribute to each object

To incorporate a new property or array item into an existing virtual DOM element in Vue.js, the $set function must be utilized. Attempting to do so directly can cause issues: For objects: this.myObject.newProperty = "value"; For arrays: ...

javascriptvue.js