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

What could be causing the error I'm encountering while running the 'net' module in Node.js?

I am currently working with .net modular and have opened TCP port 6112. var net = require('net'); var server = net.createServer(function (socket) { //'connection' listener }); server.listen(6112, function () { //'listening ...

javascriptnode.jssockets

What methods could I use to prevent the WYSIWYG buttons from automatically linking?

I've been working on creating an editor but I'm facing a small issue. Every time I click on a button (such as bold or italic), it follows a link instead of performing the desired action. Here's a snippet of what I've tried so far: fu ...

javascripthtml

A guide on how to access a Vue data property within another data property

I am delving into Vue.JS and facing an issue where every time I try to reference the dashboards property from the currentDashboard data expression, it returns 'dashboards is not defined'. Could it be possible that Vue is evaluating the currentDas ...

vue.js

Building a custom onChange event handler in Formik allows for greater

I want to modify the onChange function in formik input so that it converts the value from a string to a number. However, I'm unable to change the behavior as expected and the console.log doesn't show up on the screen. It seems like Formik's ...

javascriptreactjsformsformik

"Troubleshooting: Issue with the custom rule 'isBetween' validation in Vee validate

I am working on validating text fields and attempting to create multiple rules such as required, minlength, maxLength, and chaining them together. Depending on which parameter is passed, the validation should be performed. While working on this, I referre ...

vue.jsvee-validate

Utilizing CakePHP 3.0 with jQuery UI for an autocomplete feature

Seeking assistance on why the current code isn't functioning. The objective is to retrieve data from the index controller to search and obtain JSON data. No requests are being made, and there are no visible results. New to CakePHP 3.0, I am attemptin ...

javascriptphpjqueryjsoncakephp

ReactJS frontend is experiencing issues resolving a significant number of its node modules all of a sudden

After dedicating multiple weeks, on and off, to developing this application, I encountered a frustrating issue today. Everything had been running smoothly until now - I followed my usual setup process, installed all modules using npm install, and initializ ...

javascriptnode.jsreactjsnpmnode-modules

Iterate using jQuery through all child div elements

<div id="SelectedSection" class="selected"> <div class="sec_ch" name="7"> <div class="sec_ch" name="8"> <div class="sec_ch" name="9"> <div class="sec_ch" name="11"> <div class="clear"> </div> </di ...

javascriptjqueryloopshtmleach

Combining all code in Electron using Typescript

I am currently working on developing a web application using Electron written in Typescript and I am facing some challenges during the building process. Specifically, I am unsure of how to properly combine the commands tsc (used to convert my .ts file to ...

javascripttypescriptnpmelectron

The addition of a slash between the hashtag and the anchor name by Fullpage.js is causing conflicts with ng-include

My experience with using fullpage.js on a simple site alongside angular directives has been met with an issue. When including a .phtml file, the anchor functionality of fullpage.js stops working as it adds a slash before and after the anchor name. UPDATE ...

javascriptjqueryangularjsfullpage.js

Ways to access information and functions from another component

Creating a timer dashboard where alarms can change the background color of the timer. Looking to display the timer on a different page with the set background color from the dashboard, but struggling to pass data between components successfully. http ...

javascriptreactjsvue.js

React function causing website to freeze upon dispatch

I created a function in the child component to handle checkbox selection and trigger setDispatch(true). Unfortunately, whenever I check the checkbox, the website freezes and stops responding until I close and reopen it. Here is the function: const [ ...

javascriptreactjsreact-hooksnext.js

What is the most efficient way to transfer substantial data from a route to a view in Node.js when using the render method

Currently, I have a routing system set up in my application. Whenever a user navigates to site.com/page, the route triggers a call to an SQL database to retrieve data which is then parsed and returned as JSON. The retrieved data is then passed to the view ...

javascriptnode.jsexpresswebrendering

How to locate the cell with a specific class using JavaScript/jQuery

I need help with the following code snippet: var output = '<tr>'+ '<td class="class1">One</td>'+ '<td class="selected">Two</td>'+ '<td>< ...

javascriptjquery

A method for categorizing every tier of JSON data based on a shared attribute

I am encountering issues with my project as I attempt to construct a tree using JSON data. Here is an example of what I have: var treeData = [ { "name": "Root Node", "parent": "null", "children": [ ...

javascriptjson

What is the best way to use Jquery to enclose a portion of a paragraph text within a

How can I wrap the content inside a span that comes after another span, inside a paragraph and a new span? To further illustrate this, consider the following example: <p>foo <span>bar</span> baz</p> The desired outcome is: <p& ...

javascriptjqueryhtml

Using a dojo widget within a react component: A beginner's guide

Has anyone found a way to integrate components/widgets from another library into a react component successfully? For example: export default function App() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + ...

javascriptreactjsdojo

A guide on successfully implementing Nuxt-img on nuxt3 generate!

I've been experimenting with nuxt-image on NUXT3, but I've run into an issue when using the generate command. While images display correctly during development, they return a 404 error when using nuxt generate. In my nuxt config, I have: modules ...

vue.jsnuxt.jsvuejs3nuxtjs3static-site-generation

How can I create a customized scrollbar for a div element in an Angular 2.0 CLI project?

I am attempting to create a sleek horizontal scroll bar within one of my div elements, similar to the example shown here: https://i.stack.imgur.com/ziWhi.png My project is based on the angular2 CLI. Progress so far: I came across this package angular2-s ...

javascriptangularscrollscrollbarangular2-directives

Having trouble with a 400 bad request error, could the method be incorrect?

Hey there, I'm currently facing a bit of a roadblock and not exactly sure what's causing the issue. My Postman login seems to be working fine, but my backend isn't accepting anything, so I suspect there might be something wrong with my meth ...

vue.js