Using Vue.js, the 'import' statement is not functional when used in an external JavaScript file

Allow me to clarify...

I am encountering an issue with my utils.js file:

import dayjs from 'dayjs'; //https://github.com/iamkun/dayjs

exports.utils = (function() {
    someDateFunction() {
       ...some dayjs function calls ....
    }
})();

(Although it has been suggested by someone that it should be module.exports, I have other source files where both ways work - with or without module.)

When I include the import statement in the first line, vue-cli compiles without errors. However, when running in the browser, I encounter the following error:

Uncaught ReferenceError: exports is not defined
    at eval (utils.js?2f14:3)
    at Module../src/assets/js/utils.js (app.js:1541)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    ...

I am including/importing this utils.js file using

const { utils } = require("@/assets/js/utils.js");

Why am I unable to import in the file?
If you require version information, please let me know and guide me on the commands to retrieve the necessary details (running on macos).

I have searched extensively online and found suggestions related to solving it with typescript or vue js.

Unfortunately, none of these solutions seem to work for me. Surely, I am not the first one facing such issues, right? Any assistance would be greatly appreciated.

References:

My dependencies in package.json

"dependencies": {
  "axios": "^0.21.1",
  "bootstrap": "^4.5.3",
  "bootstrap-vue": "^2.18.0",
  "core-js": "^3.6.5",
  "cropperjs": "^1.5.9",
  "dayjs": "^1.9.6",
  "vue": "^2.6.12"
},
javascriptvue.jsimportvuejs2

Answer №1

Recently, I discovered a solution:

Instead of importing dayjs from 'dayjs';

I opted for using const dayjs = require('dayjs');

And it worked perfectly. I came to this realization after reading an article on the differences between require and import at this link. Although English is not my first language, I was able to grasp about 15% of the content. I have yet to try tuhin47's suggestion.

Answer №2

The reason for the error message stating "exports does not exist" is due to the fact that the correct syntax should be module.exports =

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

Retrieve a pair of values in a Node.js JavaScript application

I'm in search of a solution to locate an item and its index within an array, and then store them in separate variables. Though I'm relatively new to programming, I'm encountering challenges in tackling this problem. I attempted to use destru ...

javascriptnode.jsmongodb

How to retrieve the content of a textarea element without knowing its id?

I am struggling to retrieve the value of a textarea whose id is dynamically populated with values from a database. How can I achieve this using jQuery? function updateTextarea(textarea, updateUrl) { var field = textarea.attr("data-field"); var id ...

javascriptjquerytextarea

Using Javascript to Implement Pinch Zoom on Android

After searching through the depths of the internet, I have yet to come across a viable solution or answer. The challenge at hand is the need to implement pinch zoom functionality for an element (specifically an image) using JavaScript in a Phonegap environ ...

javascriptandroidjquerycordovapinchzoom

Sending a volatile emit to a specific namespace using SocketIO

An issue is arising with the following code snippet, resulting in the TypeError: Cannot read property 'volatile' of undefined (in other words, map does not have a volatile emit method): io = require("socket.io").listen(server) map = io.of "/map" ...

javascriptnode.jswebsocketsocket.io

The AJAX POST function is not functioning properly when clicking on contextmenus

Can someone please assist me? I am having trouble sending data via ajax post to my nodejs server from contextmenus. It is not functioning as expected. Although the ajax request does not give any error alert, the data is not being sent successfully. I hav ...

javascriptajaxpostgoogle-chrome-extension

Using ocLazyLoad with Angular 1 to enhance controllers versatility

I have successfully incorporated ocLazyLoad to load a controller for a ui-router state with a resolve function in the state definition. In this controller, I utilized angular.extend to extend my main controller with various child controllers as shown below ...

javascriptangularjsangular-ui-routerlazy-loadingoclazyload

Select three random items from a string array list along with their corresponding indexes using TypeScript in Angular

Consider this example: I am working with a string array const groceries = [ 'milk', 'coriander', 'cucumber', 'eggplant', 'carrot', 'brinjal', 'on ...

javascriptangulartypescriptarraylist

Is there a way to effortlessly zoom in on a Google map with just one mouse click?

Can the Google Maps be zoomed to a specific level with just one click of the mouse? ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3

Is there a way to navigate directly to a specific section without triggering scroll behavior? Are there any alternatives to scrollIntoView() that do not

I'm currently working on setting up a page redirection to a specific section, aiming to navigate to a particular anchor div without any scrolling behavior. However, I've encountered an issue with the #id method due to having a query string in the ...

javascriptphphtmlvue.jshttp-redirect

The animation of a cube rotating to a different face is not functioning properly when using three.js

Why is my cube not animating when rotating to another face with the code below? How can I resolve this issue? new Vue({ el: '#app', data () { return { camera: null, scene: null, renderer: null, mesh: null, ...

vue.jsthree.js

Exploring the World of Browserify Submodules

/xyz /abc.js /abcdef.js /index.js When working with node.js, if you use the require statement for a directory (require('xyz')), it will automatically search for an index.js file within that directory and return the exports defined in that ...

javascriptnode.jsreactjsbrowserify

Is it possible to return a promise after utilizing .then() in AngularJS?

As someone who is still getting the hang of Angular and promises, I want to make sure I'm on the right track. Right now, my data layer service uses Restangular to fetch data and returns a promise. Here's how it looks... dataStore.getUsers = fun ...

javascriptangularjspromiserestangularangular-promise

3D spinning icosahedron adorned with circles at each corner using three.js

In my project, I am working with an interactive icosahedron mesh that undergoes rotation. As part of the animation loop, circle geometries are dynamically added, and their locations are set to each vertex of the mesh at every frame. geometry = new THREE.I ...

javascriptanimationgraphicsthree.jsgeometry

Lodash will return a false value when checking an empty object

I am working with the object req.user.stripe, which currently has a value of an empty object {}. I want to determine whether this object is empty or not by using the lodash function isEmpty(). However, when I use console.log(_.isEmpty(req.user.stripe)), it ...

javascriptnode.jslodashjavascript-objects

Design a dynamic dropdown feature that is triggered when the chip element is clicked within the TextField component

Currently, I am facing difficulties in implementing a customized dropdown feature that is not available as a built-in option in Material UI. All the components used in this project are from Material UI. Specifically, I have a TextField with a Chip for the ...

javascriptjquerycssreactjsmaterial-ui

Only IE has a different margin-top effect on hover in the slideshow - Check out the CSS & project link for more details

When hovering over the IE slideshow, it moves downward. Any suggestions on why this happens? Visit development.legendarylion.com for more information. Could someone provide insight on why the slideshow increases top margin when hovered over? Explore the ...

javascripthtmlcssinternet-explorerslideshow

How can you generate a Base64 string with Node.js?

I recently utilized the html2pdf npm package to generate a base64 string of a PDF file and then sent it to my Node.js server. I used Nodemailer to send this PDF as an email attachment by configuring the mailOptions object like so: let mailOptions ...

javascriptnode.js

Issue encountered while retrieving information from JSON structure

My data is stored in a JSON file named info.json. [ {"employee": {"name":"A", "salary": "324423"}}, {"employee": {"name":"B", "salary": "43111"}}, {"employee": {"name":"C", "salary": "43434"}}, {"employee": {"name":"D", "s ...

javascriptjqueryjsonajax

“Can you confirm if this syntax is correct for defining methods in Vue.js?”

When defining methods in my Vue app, I have chosen to use the following format: methods: { myMethod(arg) { // do something here } } Although it is more common to see it written like this: methods: { myMethod: function (arg) { // do somethi ...

javascriptvue.js

What is the best way to incorporate both an input button and an anchor tag in my code?

Here's the situation: <a> Content content content <input type="Submit" onclick="...."> </a> The issue is that when I click the submit button, it redirects to a different page instead of triggering the onclick event. ...

javascripthtmlcss