Having trouble with Vue 3's `yarn serve` getting stuck at 42% while trying to import

Issue with Vue 3's yarn serve: It gets stuck at 42% when trying to import an external js file into main.ts.

The problem lies in the following code:

Main.ts

import '@/assets/js/jquery.min.js';

No error is displayed, it just hangs at:

42% building 267/276 modules 9 active /Users/mark/Documents/workspace/testapp/test-web/node_modules/html-entities/lib/surrogate-pairs.js

Encountering the same issue when attempting to import any external js file.

Since there are no explicit error messages, can someone point out what might be going wrong?

javascripttypescriptvue.jsvuejs3

Answer №1

Have you placed the jQuery JavaScript file in that directory? Try adding the dependency through package.json and importing it as shown in this example: https://www.npmjs.com/package/jquery

I noticed that you're working with TypeScript due to your main.ts file, and typically the application won't compile JS files when TypeScript is being used in the project.

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

How can I locally store 3D models and textures using three.js?

Currently working on a game using three.js, where each game level is on a different page. However, when transitioning from one level to another, the browser reloads the page which can be quite slow. Is there a way to store 3D models locally so they don&apo ...

javascriptphpthree.js

There seems to be a mysterious issue with the addClass function in jQuery, as it is not behaving

I am facing an issue with the function showColorStart() as it is not working as expected. When this function is called, the background color of the squares should change to the color specified in the array colorspicked[lindex], but it is not doing so. I ha ...

javascriptjqueryarrays

JavaScript function for automatic scrolling to the bottom of the page is not functioning as expected

I'm working on incorporating a terminal/console feature into my website. I came across the JavaScript functions for scrolling down a page, namely window.scrollTo(0,document.body.scrollHeight); and window.scrollTo(0,document.querySelector(".fakeSc ...

javascripthtmlcssscroll

Layer a div on top of another when a button is clicked

I am currently working on a project that involves two visualizations placed in different divs. My goal is to overlay one div over another when a button is clicked so that they can be compared, and then separate them again with another button click. Does ...

javascripthtmlcss

What is the process for renaming a Discord channel through nodeJS and discordJS?

I'm currently developing my first Discord bot using node.js and discord.js. My objective is to provide real-time information about a Minecraft server through Discord. What I aim to achieve is to have a channel that automatically updates its name per ...

javascriptnode.jsdiscord.js

Troubleshooting: Prettier Extension Compatibility Issue in VS Code with Create-React-App and Typescript Template

I'm currently in the process of setting up my application using the Create-React-App startup package with the TypeScript template. Everything goes smoothly during the initial installation. However, when I attempt to use the Prettier Code Formatter ext ...

typescriptvisual-studio-codecreate-react-appprettier

Tips for sending a div value that is not included in the model to the backend controller action

Question: I am looking to have a single div element in the user interface that can display a value added via JQuery and then be accessible in the backend once the form is submitted. View: @model ScheduleAptMV using (Html.BeginForm()) ...

javascriptjquery.netasp.net-mvcrazor

Clicking on the checkbox will trigger the corresponding table column to disappear

Upon clicking the filter icon in the top right corner, a menu will open. Within that menu, there are table header values with checkboxes. When a checkbox for a specific value is selected, the corresponding table column should be hidden. I have already impl ...

javascripthtmlreactjsreduxmaterial-ui

Choose an option from the dropdown menu in the form

I am looking to design a form field with options that display additional fields when a specific option is chosen. <div class="col-md-12"> <label for="event" class="form-label" >Do you have more details about ...

javascriptformsbootstrap-5

Angular Card Flip Directive and Its Isolated Scope

In my AngularJs project, I am working on a directive to achieve card flipping functionality. Using HTML(Jade) card display | this is sid input.btn.btn-primary(type='submit', value=&apos ...

javascriptangularjs

Ways to store debug logs in a file within my project

In the project I am currently working on, I incorporate the Debug package which can be found at https://www.npmjs.com/package/debug. As part of this setup, I have set an environment variable (variable name: DEBUG & value:*). As a result, I am able to vie ...

javascriptnode.jsnpm

Create an intricate table design using CSS grid and incorporate nested vue v-for loops for dynamic content rendering

I have data that is nested and I want to display it in a tabular format. Here is an example of the data; in the actual application, there could be dozens of entries in rows. <script> export default { name: 'Example', data () { retu ...

cssvue.jsvuejs2css-grid

What steps can be taken to resolve the issue of the error message "It is possible that this issue is not related to npm. There may be more detailed logging information provided

While working on a project using Vue CLI, I encountered the following error message: throw er; // Unhandled 'error' event ^ Error: getaddrinfo ENOTFOUND x86_64-apple-darwin13.4.0 at GetAddrInfoReqWrap.onlookup [as oncomplete] (d ...

vue.jsnpm

Unable to create an intersection between two arrays that are nested within each other

I'm currently trying to make translations dynamic, but I'm facing a challenge when it comes to displaying the corresponding objects from another array. In this scenario, I have two arrays that share the same model. What I aim to achieve is to in ...

javascripthtmlreactjs

Having trouble positioning a div in AngularJS so that it stays pixel-perfect regardless of browser resize or device orientation? Unfortunately, it's

I am a newcomer to AngularJS and have been struggling with a particular issue for several days now, leading me to suspect that I may be using it incorrectly. The problem at hand involves positioning 30 divs in a specific manner: 1) Each div should displa ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-repeat

JavaScript code to use Angular expressions in an HTML document

I am facing an issue with using Angular expressions inside JavaScript within an ng-repeat loop on my HTML page (note that the app and controller have been declared elsewhere): <div ng-repeat="eleRubrique in scopeComplet"> <script type="text ...

javascriptangularjs

looking to implement auto-scroll feature in flatlist using react native

I'm attempting to implement auto-scroll functionality in my FlatList, but I'm encountering a problem where the list does not scroll automatically. Additionally, whenever I try to manually scroll, it reverts back to index 0 every 5 seconds. Below ...

javascriptandroidreactjsreact-nativereact-native-flatlist

The CSS code hides a portion of the fixed side navigation when the main content is shorter than the navigation bar

My side nav and main content are both dynamic. The issue arises when the navigation is longer than the main content, causing its height to be set to the viewport height and the rest is hidden. How can I address this problem without resorting to an unsightl ...

javascriptjqueryhtmlcss

Creating interactive buttons with CSS and jQuery

As a newcomer to coding, I'm trying my hand at creating two buttons that transition from green to blue with a single click, and eventually incorporating them into a live website. The functionality I'm aiming for includes: Both buttons startin ...

javascripthtmljquerycss

When navigating back in Next.js, the URL changes but the content remains the same

I'm currently troubleshooting an issue where the content is not updating when I navigate back using the browser's back button or by setting a button with router.back. The URL updates correctly, but the content remains the same. When I refresh the ...

javascriptreactjsnext.jsback-buttonnext-router