Export was not discovered, yet the names are still effective

There seems to be a slight issue that I can't quite figure out at the moment...

In my Vue project, I have a file that exports keycodes in two different formats: one for constants (allCodes) and another for Vue (keyCodes):

export default {
  allCodes,
  keyCodes
};

Trying to import one of them using deconstruction like this results in an error:

import { allCodes } from '@/helpers/keycodes';

21:17-25 "export 'allCodes' was not found in '@/helpers/keycodes'

 warning  in ./src/mixins/GlobalKeyPressHandler.js

But importing and then referring to the key by name works just fine:

import object from '@/helpers/keycodes';
console.log('allCodes', object.allCodes);

Any idea what might be causing this discrepancy?

javascriptvue.jsecmascript-6

Answer №1

To use named exports, ensure that your export statement looks like this:

export {
  allCodes,
  keyCodes
};

Currently, you are exporting an object as default.

By the way, if you are attempting to destructure imports, it may not work as expected. The named import statement is different from object destructuring, although they may appear similar in simple cases.

If you want a default export instead, you should make the assignment below the import statement:

export default {
  allCodes,
  keyCodes
};

// On the importing side
import keycodes from '@/helpers/keycodes';
const { allCodes } = keycodes;

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

Enhancing Bootstrap Carousel with various effects

My exploration of the web revealed two distinct effects that can be applied to Bootstrap Carousel: Slide and Fade. I'm curious if there are any other unique effects, such as splitting the picture into small 3D boxes that rotate to change the image? ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

How to eliminate spacing between slides in a 3D Carousel Slider using Bootstrap 5

My website utilizes Bootstrap along with a carousel slider, which is functioning properly. However, I am encountering an issue when the slider transitions from right to left. It briefly displays a white space between slides, which I wish to eliminate. I wa ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Can we verify if this API response is accurate?

I am currently delving into the world of API's and developing a basic response for users when they hit an endpoint on my express app. One question that has been lingering in my mind is what constitutes a proper API response – must it always be an o ...

javascripttypescriptapiexpress

Is it possible to change the transition behavior within a Vue component?

Is there a way to modify or replace transitions within a Vue component? I am currently using Buefy components for my website, but I have encountered an issue with certain components like collapse that have a slot with a fade transition that I do not pref ...

javascriptvue.jsvue-component

Filtering an array of parent elements in Javascript based on a specific value found in

Trying to filter data from a 3-layer array based on child array values. Making progress but hitting a roadblock at the end. { "id": 1, "grandparent": "Timmy", "parents": [ { "id&q ...

javascriptarrays

Arranging elements using the ng-repeat directive in AngularJS

My question pertains to an array I am working with: $scope.answers=["","","",""] This array contains several empty elements. <li ng-repeat="item in answers "><input type="text" ng-model="item"/></li> When running this code, an error i ...

javascriptangularjssortingangular-uiangular-ui-bootstrap

The operation of assigning the value to the property 'baseUrl' of an undefined object cannot be executed

I recently created a JavaScript client using NSWAG from an ASP .NET Rest API. However, I am encountering some errors when attempting to call an API method. The specific error message I am receiving is: TypeError: Cannot set property 'baseUrl' of ...

javascriptangularjstypescriptnswag

Adding content into a designated position in a document

My challenge is to find the index of user-provided data in order to insert new data at that specific point. I am familiar with array insertion methods, but extracting the index provided by the user is where I'm stuck. My current approach involves filt ...

javascriptreactjs

Turn off a feature on older buttons

For my project, I am looking to dynamically add specific elements like buttons. However, every time a new button is added, the function call for the old button gets duplicated. var btnElem ='<button type="button"class="doSomething">Button< ...

javascriptjqueryhtml

Continuously calling setState within the useEffect hooks causes an infinite loop

After extensive research and reading various articles on the topic, I am still facing the issue of infinite loops with useEffect and useState. One article that caught my attention was this one. Prior to reading the article, my useState function inside use ...

javascriptreactjs

Help me figure out how to independently toggle submenus on my navbar by utilizing the Vue.js composition API

I am currently working on developing a navbar using the Vue.js composition API. My primary objective is to toggle the submenus when a user clicks on them. However, since I am iterating through an object to display the submenus, I am faced with the challeng ...

javascripthtmllaravelvue.jsvue-composition-api

I'm interested in exploring different database implementation patterns in JavaScript. What kinds of approaches can I consider?

As someone who is relatively new to exploring JavaScript, I have been immersed in experimenting with a node test app and MongoDB. I am eager to delve into the database aspect of the app but finding myself uncertain about the most commonly used patterns in ...

javascriptnode.jsmongodb

When you click, apply the hidden class to all the div elements

Is there a way to apply the .hide class to all .slide divs whenever the .option button is clicked? If so, how can I modify my JavaScript code so that all .slide divs receive the .hide class (if they don't already have it) upon clicking the .option bu ...

javascriptjqueryradio-button

Tips for utilizing a switch statement

I'm a beginner in JavaScript and recently learned about the switch statement. I have an exercise where I need to convert numbers 1-10 into words like "one", "two", "three"... This is what I have tried so far: function sayNum(){ let numberArray = [ ...

javascriptarraysswitch-statement

execute the command only if all ava tests succeed

I'm working on creating an npm script that will execute Ava, and if it is successful, will then run another deploy command. Is there a way to obtain the result of an Ava test in JavaScript, or to save it to a file or pass it to a subsequent command? ...

javascriptnode.jsnpmava

What is the method to extract information from the provided URL?

Hello, I am looking to retrieve system requirements data from . How can I achieve this using JS or react? ...

javascriptreactjs

Error in Angular: Trying to access property 'setLng' of a null component variable

Just starting out with Angular and I've come across the error message Cannot read property 'setLng' of null. Can anyone help explain why this is happening? import { Component, OnInit, Input } from '@angular/core'; @Component({ ...

javascriptangular

ReactJS - When a child component's onClick event triggers a parent method, the scope of the parent method may not behave as anticipated

In my current setup, I have a parent component and a child component. The parent component contains a method within its class that needs to be triggered when the child component is clicked. This particular method is responsible for updating the store. Howe ...

javascriptreactjs

Encountering a bad request error while attempting to update a numeric value in MongoDB

I attempted to update a single element in mongodb, specifically a number value. Below is the request sent to the DB: const handleDelivered = (num) =>{ const total = service.quantity; const final = parseInt(total) + num; console.log(tota ...

javascriptmongodbexpress

The equivalent of ESM for resolving modules using the `createRequire` function with a specified

In the process of developing a JavaScript instrumentation engine, I am currently focused on traversing a source file's Abstract Syntax Tree (AST) and queuing imported modules for instrumentation in a recursive manner. In order to achieve this, it is c ...

javascriptnode.jsnode-moduleses6-modules