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

What is the best method to add data to a child array located within a nested array?

Struggling to create an array that will display data in the following format: Healthcare -- Insights driven by data for improved healthcare -- Urban Analytics Transport -- Urban Analytics Cities -- Urban Analytics I have attempted ...

javascriptarraystypescriptpure-js

A notification appears when the record is being inserted after clicking the button

Just venturing into the PHP and MYSQL realm, so please excuse any beginner questions. Before I submit data from a form to my SQL table, I'd like to display a confirmation POP UP message asking "Are you sure you want to insert this data?" ...

javascript

Unraveling JSON with jq

Struggling to extract the difficulty value from a JSON structure using jq on the linux command line: ./jq '{result: .difficulty}' status.txt (The JSON data is stored in a file named status.txt - displayed below) Despite multiple attempts, all I ...

jsonparsingjq

Determine whether a JavaScript string exclusively consists of punctuation marks

In an if statement, I want to verify whether the given string contains any punctuation. If it does contain punctuation marks, I intend to display a pop-up alert message. if((/*regex presumably*/.test(rspace))==true||(/*regex presumably*/.test(sspace))==tr ...

javascriptif-statementpunctuation

Is there a way to display JSON in a textbox while addressing issues with double quotes?

My task is to display a JSON string in a textbox that came from the database as a string and drops after the first quote. If I try replacing with a single quote: jsonString.Replace("\"", "'") it works but only shows a single string instead. I ...

c#jsonstringdouble-quotes

Passing the entire command dynamically as an argument/parameter to a script value in NPM or Yarn

Package.json { custom: "", "build:xapp": "webpack ....", "test:xapp": "karma ....", "build:yapp": "webpack ....", "test:yapp": "karma ...." ... n number of apps } If I need to pass the entire command for ...

node.jsnpmwebpackgulpyarnpkg

Come hang out in the user voice channel by reacting with your favorite emojis!

I am currently developing a Discord bot, and I want to implement a feature where the bot joins a voice channel if a user reacts to its message. I am using the awaitReactions function which only returns reaction and user data. Is there a way to retrieve th ...

javascriptnode.jsdiscorddiscord.js

Error alert: Blinking display, do not dismiss

I am trying to make it so that when the "enviar" button is clicked, the "resultado" goes from being hidden ("display:none") to being visible ("display:block"). This is my html document: <script type="text/javascript"> function showResu ...

javascripthtmlcssblock

Attempting to display a base-64 encoded image in a Next.js application

After following this method, I successfully uploaded my image as a string: const [image, setImage] = useState(""); //------------------^^^^^^^^^^^^^^^^------------------------- const handleImage = (e) => { ...

javascriptmongodbimagenext.js

When the initial image URL returns a 404 error, the ng-src path does not automatically switch to the alternative

I'm currently working on a webpage where I want to show an image only if the URL of that image is valid, using AngularJS. The challenge I'm facing is that ngIf only checks whether a value is null or not. So, even if the URL returns a 404 error, ...

javascriptangularjs

Focusing on pinpointing certain mistakes within Drupal 7

When working with Drupal, encountering errors is a common issue. While some errors are simple to fix, others can be quite complex and require significant time and effort to resolve, even if the website appears to function normally despite the error. My qu ...

javascriptjquerydrupaldrupal-7

Best Practices for Handling Form State in ReactJS with Redux

Currently in ReactJS + Redux, I am utilizing Material-UI's TextField for a form where users input their firstName, lastName, birthMonth, birthDay, and birthYear. The existing setup works but appears redundant, especially when handling the birth date f ...

javascripthtmlreduxreactjs

AJAX responses sans the use of jQuery

Similar Question: How can I achieve this through AJAX? After my previous attempt at asking this question, where I was not clear enough, I am making another effort to be as specific as possible. To start with, I have my data encoded using the json_enc ...

phphtmlajaxjson

Extract particular elements from an array and transform them into a new array

Presented below is an array: [{ "title": "Apple iPhone 7 Plus 32 GB", "category": "phone", "brand": "apple", "condition": "Used", "price": 800, "id": 0, "description": "Apple" }, { "title": "Apple Ipad Air 32 GB", "category": "tablet", "brand ...

javascriptarraysjson

I'm curious about the purpose of the "^=" operator in this algorithm for finding the unpaired numbers. What exactly does it do?

I came across a fascinating code snippet that helps find a unique number in a list of duplicate numbers (where each number appears twice, except for one). function findNonPaired(listOfNumbers) { let nonPairedNumber = 0 listOfNumbers.forEach((n) => ...

javascriptbit-manipulationbitwise-operators

Associate text with a color from a predetermined list (JavaScript)

As I work on adding tags to my website for blog posts, I have a specific vision in mind. Each tag should be assigned a unique background color selected from a predefined array of theme colors. My goal is to assign the same background color to tags with id ...

javascriptstringtypescriptcolors

What is the best way to incorporate dynamic data from Firestore into a function using the `where()` method, while also utilizing the `snap.size` property to accurately count the total number of queries

I am facing an issue while trying to fetch data dynamically from firestore using a where() function. The specific error message I encountered is: TypeError: vaccines is not a function The user collection: [![enter image description here][1]][1] Here a ...

javascriptreactjsfirebasegoogle-cloud-firestore

Retrieving the input value from embedded cells in a specific row of a table

I need the function to calculate the result of the following expression using values from the table below: a+b*c-(e/f) This calculation should exclude rows with e and f. Although I encountered a similar issue before, there was no solution for this spe ...

javascripthtml

Executing a Powershell script utilizing the -ObjectEvent command may unexpectedly halt when interacting with the ConvertFrom-Json cmd

I've successfully managed to trigger an action upon file creation, but I'm encountering an issue while attempting to make a Rest API call and format the response in JSON using ConvertTo-Json. Despite not receiving any errors, nothing seems to hap ...

jsonpowershell

What is the best way to incorporate mongoose discriminators?

For my current project, I am looking to utilize mongoose discriminator to manage a collection of users with a specific document structure for the owner. However, I have encountered an error: throw new Error('The 2nd parameter to mongoose.model() shou ...

javascriptnode.jsmongodbmongoosediscriminator