Error message occurs during compilation of basic Vue file in Webpack

When I execute webpack watch in the VS2017 task runner, it displays the following error:

ERROR in ./wwwroot/js/src/App.vue
Module build failed: SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
...

The contents of the App.vue file are simple:

<template>
    <div id="app">
        <h1>XXX{{ sources.length }}</h1>
    </div>
</template>

<script>
   ...
</script>

<style>
   ...
</style>

This code runs without errors on another computer, so I am unsure why this specific error is occurring. I lack expertise in webpack/vue/typescript and would appreciate any assistance as the current error message does not provide much insight.

Answer №1

Resolved the issue by updating the vue-loader module, despite the task runner still displaying an error message. However, everything compiled correctly when running webpack --watch --color in powershell:

npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b6d6e7e3677747a7f7e695b2a2f35293529">[email protected]</a>

https://github.com/vuejs/vue-loader/issues/1177

Upon investigation, found that Visual Studio's Task Runner was utilizing webpack from the node_modules/.bin folder. To address this, navigated to Tools -> Options -> Projects and Solutions -> Web Package Management and prioritized the $(PATH) entry at the top of the list (referencing Task Runner Configuration Missing in Visual Studio 2017)

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

Strategies for preventing profanity in Typescript within Nuxt 2 implementation

implement user authorization functionality create the Auth class for authentication handling import type { Context } from '@nuxt/types'; export class Auth { public ctx: Context; constructor(ctx: Context) { t ...

Angular 2 - Dependency Injection failing to function

I have created two different implementations for an interface and assigned them as providers for two separate components. However, I am encountering the following error: Error: Can't resolve all parameters for ChildComponent: (?). What could be the i ...

Creating a unique ngrx operator from scratch that modifies the source observable and outputs its type

I developed a custom operator called waitFor that is being used in my effects like this: public effect$: Observable<Action> = createEffect(() => { return this.actions$.pipe( ofType(myAction), waitFor<ReturnType<typeof myActio ...

Choose the radio option with a personalized tag

I'm dealing with an array of colors and I want to use them to select text colors using radio buttons. I have customized the default radio button using a label, but now I'm facing an issue where the radio button only selects one color while the la ...

Combine multiple objects to create a new object that represents the intersection of all properties

Imagine you have these three objects: const obj = { name: 'bob', }; const obj2 = { foo: 'bar', }; const obj3 = { fizz: 'buzz', }; A simple merge function has been written to combine these three objects into one: ...

Issue: Encounter of an unexpected token (Please ensure that plugins are installed to import files that are not JavaScript) while using the rollup vue package

I am working on creating a Vue component library, but I encountered an error with my type checking. I attempted to update TypeScript as mentioned here, but it did not resolve the issue. Here is a snippet of my code and `package.json` file. My component cod ...

What kind of output should a Server Side Component generate?

Recently, I decided to incorporate the NextPage type from Next.js into my component writing routine after hearing it's a beneficial practice. However, I discovered that it only functions properly with client-side components. When attempting to utilize ...

Guide on sending a form from a separate component upon clicking the OK button in a modal window using Bootstrap Vue

I've encountered a situation in my Vue app where I have a component called TodoForm that handles a basic form. I want to implement functionality using bootstrap-vue so that when the OK button within a bootstrap modal is clicked, the form is submitted. ...

Is it feasible to access a service instance within a parameter decorator in nest.js?

I am looking to replicate the functionality of Spring framework in nest.js with a similar code snippet like this: @Controller('/test') class TestController { @Get() get(@Principal() principal: Principal) { } } After spending countless ho ...

Utilizing Vue.js 2.0 to Generate Multiple Bootstrap Modals

Trying something new can be challenging, especially when it comes to creating an image gallery in vue.js. As a beginner with this framework, I decided to use vue-bootstrap for my project. However, I ran into some confusion when trying to implement a modal ...

Transform Dictionary JSON into Typescript model

How can I convert the provided JSON structure into a TypeScript interface to ensure type safety? { "attributes1": { "myKey1": { "myinnerKey11": { "value": "value 1", "name&q ...

Creating a variable that is not defined and then converting it into

I have an issue with a function that returns an Observable. The problem is that when the function is called, the parameter works fine, but its value becomes undefined within the Observable. This is the function in question: import {Observable} from &apos ...

The error message "localStorage is undefined in Angular Universal" indicates that the local

I have chosen to utilize universal-starter as the foundation of my project. Upon initialization, my application reads a token containing user information from localStorage. @Injectable() export class UserService { foo() {} bar() {} loadCurrentUse ...

Unable to modify object values using integers as keys does not seem to be functional

I am working with an object where the keys are numbers. item:{ 1:'test 1' 2:'test 2' 3:'test 3' } This object is generated automatically, so the keys may vary. In my method, I pass the key as a string (e.g., '1 ...

Properly implement Angular/Typescript to populate an array with chosen objects

Currently, I have an Angular application that is fetching JSON resources from a Spring Boot REST API. These resources consist of simple player objects with attributes like id, name, position, and value. On the UI, each object is displayed along with a "BUY ...

I am having trouble with updating an array in React useState. Every time I try to make changes, it keeps reverting back to the initial state. What could

My current task involves managing a state array called monthlyIncidents, which contains 12 numbers that need to be updated under certain conditions. I attempted to update the elements by copying the array, modifying the specific element, and then updating ...

Error in Vuepress: Attempting to read properties that are not defined (specifically 'match')

I encountered an error while attempting to build my vuepress project. I followed this npm quickstart guide: After adding some pages, everything was functioning correctly with: npm run:dev However, when I tried to generate html to docs/src/.vuepress using ...

Error: You can't use the 'await' keyword in this context

I encountered a strange issue while using a CLI that reads the capacitor.config.ts file. Every time the CLI reads the file, it throws a "ReferenceError: await is not defined" error. Interestingly, I faced a similar error with Vite in the past but cannot ...

What method is the most effective for retrieving the prior slug name in NextJS?

Looking for Help with Retrieving postID? Greetings! I am currently working on a basic post detail page using NextJS. My URL structure is: [postID]/[title].tsx On the post detail page, I need to fetch the post's data based on the postID, which is hig ...

Tips for verifying the rendered view post data retrieval from an API in Vue JS

Having trouble retrieving data from the API using Vue JS and printing the page? After fetching the data, some elements may not render completely when trying to print, resulting in blank data being displayed. While using a setTimeout function may work for s ...