Guide on building fresh source code in vuejs template with webpack

Can I ask a simple question that's challenging for me? It pertains to the compilation of Vue.js based on webpack.

I am relatively new to Vue.js, particularly in regards to this boilerplate (https://github.com/chrisvfritz/vue-enterprise-boilerplate). I have a desire to create an app using this boilerplate.

After installing the boilerplate, I decided to integrate "vuetify" (a responsive GUI plugin) into my app. Achieving a responsive UI was no easy task, but eventually, they were able to work harmoniously together.

View image of Vue and Vuetify working side by side

When adding vuetify, helloWorld.vue automatically gets added to ./src/components, however, it is not compiled or transpiled. Consequently, whenever I run "yarn dev" to launch the development server, I encounter a message similar to the one below:

./HelloWorld in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=script&lang=js&

I would like guidance on how to compile HelloWorld.vue and ensure it is included in the output file like app.js. Attempts to move HelloWordl.vue to ./src proved unsuccessful as well.

I'm simply seeking small hints to help me with this issue.

Thank you in advance. June, Chung

javascriptvue.jswebpackbabeljsvue-cli-3

Answer №1

The cause has been uncovered.

Upon examining app.vue, I noticed the following addition:

import HelloWorld from './components/HelloWorld'

An issue arose due to this line (it should have been ./components/HelloWorld.vue)

I mistakenly assumed that importing the component without its file extension would work without any problems.

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

Tips for customizing the appearance of a Link component while it is the active page in Next.js

I'm seeking advice on how to style an anchor component differently when it is active on a page. Here's the code I have so far: import Link from 'next/link'; import styled from 'styled-components'; const NavStyle = styled.nav` ...

javascriptnode.jsreactjsnext.jsstyled-components

Creating a dual-column checkbox design with CSS only

I'm working with a dynamically generated form element that can only be styled using CSS. I need help achieving a specific layout without making any HTML changes, except for the classes. The "element" and "formField" classes are common and cannot be mo ...

javascriptjqueryhtmlcss

Using JavaScript to implement form authorization in ASP.NET Web API

I am looking to revamp a business application by utilizing asp.net web api as the service layer and implementing JavaScript to interact with the web api for retrieving and displaying data. While I have a good grasp on how all the scenarios will function s ...

javascriptasp.net-web-api

Node.js scheduler library for triggering events based on time in a cron-like fashion

Currently, I am utilizing Node.js to develop a web application. My aim is to trigger events at specific times. While I am aware of using setTimeout and computing the time difference from the present moment, this method does not account for various timezone ...

javascriptnode.jssettimeoutnpm

Placing text inside a designated element on a different web page upon clicking a button

Imagine a scenario where a user is browsing a website and lands on the 'prices' page. They come across a product that catches their eye and decide to click on the associated button. This action redirects them to the 'contact us' page, w ...

javascriptphphtmlcssbootstrap-4

The authentication middleware is being executed for all routes within my app.js file, despite my intention to only apply it to a single route

I have developed a requireAuth middleware and integrated it into my app.js. In app.js, I have also imported all the routes from the routes folder. Each route.js file contains multiple chained routes. When I include the auth middleware in one of those files ...

javascriptnode.jsexpressauthenticationmiddleware

Avoid utilizing variables outside of the ajax callback function

Is there a preferred method to access global variables outside of a callback function? var icon; $(function(){ $.get('data.xml', function(xml){ icon = xml.documentElement.getElementsByTagName("icon"); //this will display a value ...

javascriptjqueryajax

Leveraging Redux with React-Router-DOM Data Routes

Is it possible to integrate Redux with routers in this particular manner? What are the advantages of using this approach over utilizing the router module's hooks? import { createBrowserRouter, RouterProvider } from "react-router-dom"; import ...

javascriptreactjsreduxreact-routerreact-router-dom

What could be causing the pause function of Bootstrap 4 carousel to malfunction when triggered by an element within the carousel itself?

Yesterday, I tried to tackle this issue by asking a question: Why isn't Carousel('pause') working on mobile devices? After identifying the symptom, I decided to address it with a new focus. The title of the question doesn't cover ever ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Solving the 'never' type issue in Vue3 and TypeScript for an empty array reference

I am currently in the process of migrating a component from an old Vue project that relies solely on JavaScript to a TypeScript/Vue project, and I have encountered some obstacles along the way. <script lang="ts"> import { computed, ref } fr ...

typescriptvue.jsvuejs3

Implementing Guid regex in Angular ui-router state: a step-by-step guide

I'm working on a route .state('mystate', { url: '/{id}', templateUrl: '/views/partial.html' }); The id parameter needs to be in the form of a GUID like "2a542f61-5fff-4607-845d-972e6c3ad1e4". How can I include ...

javascriptangularjsangular-ui-routerangular-ui

Employing CSS animations to elevate div elements

Currently, I am working on animating a table of divs and trying to achieve an effect where a new div enters and "bumps up" the existing ones. In my current setup, Message i3 is overlapping Message 2 instead of bumping it up. How can I make Messages 1 and 2 ...

javascriptjqueryhtmlcsscss-animations

Differences between a traditional post request and an asynchronous ajax request

I am working with a table that contains various items. Once I select an item and click a button, I need to send its ID to the server side in order to generate an Excel file based on that ID. Should I use the traditional method of sending the ID from the ...

javascriptjqueryajax

When working with React Native, it's important to ensure that types are properly converted. In this case, attempting to cast a com

Currently, I am working with React Native and Redux-saga. When attempting to pass a value to my backend through saga, I encountered an error message that has been quite perplexing. Despite seeking assistance on StackOverflow, the solutions provided did not ...

javascriptreactjsreact-nativereact-reduxreact-hooks

Unit test failure attributed to misconfigured ECMAScript module setup

I am currently using Vue 3 along with Jest for testing purposes. I have created a simple code snippet to test, which is displayed below. Following some suggestions on Stack Overflow, I made some modifications to the babel.config.js and package.json files a ...

vue.jsjestjsvuejs3ts-jestbabel-jest

The Meteor update is unsuccessful on the Mongo Sub Collection and will not continue

I am currently facing an issue with updating a specific object within an array in my object based on a value. Whenever I try to add the update code, the function gets stuck at that point without proceeding further. None of the console.log calls after the u ...

javascriptnode.jsmongodbmeteor

Is using setTimeout in a group of promises blocking in JavaScript?

Is it possible for multiple requests to be queued up and executed in sequence when calling the function func? The third promise within func includes a lengthy setTimeout that can run for as long as 3 days. Will additional calls to func trigger one after an ...

javascriptnode.jspromisesettimeout

Tapping on the invisible picture

I currently have a square image of a car with a transparent background. My goal is to make the car clickable so that when I click on it, it triggers an action. However, I also want the transparency around the car to allow clicks to go through and affect th ...

javascriptimageclickpngtransparency

How can you check the status of a user in a Guild using Discord JS?

Is there a way to retrieve the online status of any user in a guild where the bot is present? Although I can currently access the online status of the message author, I would like to be able to retrieve the online status of any user by using the following ...

javascripttypescriptdiscorddiscord.js

How to Use JQuery to Disable Controls or Background on an ASPX Page

I have implemented a code to display a dialog box for confirming a delete action. The code works fine, but the issue is that when the dialog box pops up, it doesn't disable any controls on the ASP.Net page. This allows me to interact with other contro ...

c#javascriptjqueryasp.netdialog