Troubleshooting issue: Webpack dev server's Hot Module Replacement not functioning correctly when

I've been working on a Vue 2 application that is mostly JavaScript, and now I am looking to incorporate some new TypeScript modules and components into it.

Everything runs smoothly when I start the webpack dev server. However, whenever I make a change and the page reloads automatically, an error pops up:

Compiled with problems:X

ERROR

D:\Code\app\js_src\core\ui\alert.ts
./js_src/core/ui/alert.ts 19:19-72
[tsl] ERROR in D:\Code\app\js_src\core\ui\alert.ts(19,20)
      TS2307: Cannot find module './alert.ts?vue&type=custom&index=0&blockType=Action' or its corresponding type declarations.

... (remaining errors omitted for brevity) ...

webpack.dev.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        hot: true,
        historyApiFallback: {
            index: '/static/dist/index.html'
        },
    },
});

webpack.common.js

...(content of webpack.common.js shown here)...

tsconfig.json

...(content of tsconfig.json shown here)...

If I follow the configuration provided above, or switch the component script language to JavaScript, everything works fine.

typescriptvue.jswebpackvuejs2

Answer №1

Discovering that using ts-loader in conjunction with babel-loader can lead to some unexpected outcomes:

  {
    test: /\.(ts|js)x?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    options: {
      plugins: [
        ["@babel/transform-runtime", {
          "regenerator": true
        }]
      ],
      presets: [
        '@babel/preset-env',
        [
          '@babel/preset-typescript', // include typescript plug-in
          {
            allExtensions: true, // enable support for all file extensions
          },
        ],
      ],
    },
  },

Resolved the issue by making adjustments in my webpack.common.js.

Answer №2

svbnet

Encountering the same problem, I managed to resolve it with the following workaround:

{
  loader: 'ts-loader',
  options: {
    transpileOnly: true, // This line helps bypass the type checking during compilation
    appendTsSuffixTo: [ /\.vue$/ ]
  }
}

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 the cause of this malfunction in the Angular Service?

After creating an Angular app with a controller, I noticed that while I can successfully interact with the controller using Postman (as shown in the screenshot below), I faced issues with displaying data at the frontend. I implemented a new component alon ...

angulartypescript

tips for closing mat select when clicked outside

When a user clicks on the cell, it should display the value. If the user clicks outside the cell, the input field will close and show the field value. I am facing an issue on how to implement this with mat select and mat date picker. Any suggestions? Than ...

javascriptangulartypescript

Creating a .post request using Axios in VueJS and Nuxt

I am a beginner in web development and I have a question regarding creating a .post using Axios with Nuxt. What I need help with is creating a button that will send three inputs to the NodeJS app. <template> <div class="container"&g ...

vue.jsaxiosnuxt.js

In Angular 2, I am having trouble reaching the properties of an object nested inside another object

I have a variable named contact. When I used console.log(contact) to display its contents, this is what I got: addresss:[] company:"" emails:[] id:3 internet_calls:[] lat:"10.115730000000001" lng:"76.461445" name:"Diji " phones:[] special_days:[] timesta ...

angulartypescriptionic2

Mastering Inter-Composable Communication in Vue 3: A Guide

Composables in Vue documentation demonstrate how small composition functions can be used for organizing code by composing the app. Discover More About Extracting Composables for Code Organization "Extracted composables act as component-scoped servi ...

javascripttypescriptvue.jsvuejs3

Creating a generic that generates an object with a string and type

Is there a way to ensure that MinObj functions correctly in creating objects with the structure { 'name': string }? type MinObj<Key extends string, Type> = { [a: Key]: Type } type x = MinObj<'name', string> Link to Playgr ...

typescriptgenerics

What causes RangeError: Maximum call stack size exceeded when Element UI event handlers are triggered?

I'm currently working on setting up a form and validating it with Element UI. Despite closely following the documentation, I am encountering an issue where clicking or typing into the input boxes triggers a RangeError: Maximum call stack size exceeded ...

javascripthtmlvue.jselement-ui

Customize variable values on-the-fly in Laravel

I am trying to create a navbar in Laravel with Vue.js as a blade.php file. I want to include a variable like {{xyz}} in the navbar, and when I navigate to another page, be able to set text using Vue.js or something similar. Can someone assist me with this? ...

javascriptphplaravelvue.js

Vue 3 Router view fails to capture child's event

After some testing, I discovered that the router-view component in Vue 3 does not capture events sent from its child components. An example of this scenario is as follows: <router-view @event-test="$emit('new-test-event')" /& ...

javascriptvue.jsvuejs3

Using Promise.all for multiple function calls

I have several functions set up like this: private async p1(): Promise<Result> { let p1; // Do some operations. return p1; } private async p5(): Promise<void> { // Make a call to an external API. } Some of these functions c ...

typescriptpromise

Eliminating Unnecessary Stylesheets in Vite and Vue Website

When working on the Vite-Vue application, I noticed that the styles I implemented for both index.html and Vue components/views are showing up as crossed out in the browser. Additionally, many of the styles I added to the components/views are also being cro ...

cssvue.jsvuejs3vite

Creating dynamic text bubble to accommodate wrapped text in React using Material-UI (MUI)

I am currently developing a chat application using ReactJS/MUI, and I have encountered an issue with the sizing of the text bubbles. The bubble itself is implemented as a Typography component: <Typography variant="body1" sx={bubbleStyle}> ...

htmlcssreactjstypescriptmaterial-ui

What methods does Angular use to determine the parameter types of a constructor?

I've been experimenting with replicating Angular's approach to interpreting the constructor in an injectable service. function Injectable() { return function<T extends { new (...args: any[]): {} }>(con: T) { return class extends con ...

angulartypescript

Guide to implementing Swiper.js (version 8+) within Nuxt.js (2.15.8)

Initially, I attempted to implement the code shown on the official Swiper.js website for Vue 3 demo: <template> <swiper :effect="'coverflow'" :grabCursor="true" :centeredSlides="true" :slidesPerView="'auto' ...

vue.jsnuxt.jsswiper.jsnuxt-plugin

How do I disable the hover and click highlighting effect on a div in Vuetify using v-on in Vue2?

Currently, I have implemented a Vuetify VListItem in a NavigationDrawer with an on click listener that displays a menu in the div below. The menu is functioning properly - opening and closing as expected. However, it highlights on hover/click which I wou ...

javascriptvue.jsvuejs2vuetify.js

The requirement of the second parameter being optional or required will depend on the value of the first

Is there a way to make the second parameter of my function optional or required based on the value of the first parameter? Here's an example code snippet: enum Endpoint { USERS = '/users/:userId', ORDERS = '/orders' } typ ...

typescript

Break free/Reenter a function within another function

Is there a way to handle validation errors in multiple task functions using TypeScript or JavaScript, and escape the main function if an error occurs? I am working in a node environment. const validate = () => { // Perform validation checks... // ...

javascriptnode.jstypescript

Failed to decipher an ID token from firebase

I'm feeling extremely frustrated and in need of assistance. My goal is to authenticate a user using Google authentication so they can log in or sign up. Everything worked perfectly during development on localhost, but once I hosted my app, it stopped ...

javascripttypescriptfirebasefirebase-authentication

Strategies for disabling middle mouse button default behavior in Vue

When I use @click.middle.stop.prevent="test", the default scroll wheel still shows up despite it detecting the middle mouse click and calling my function. Is there a way to prevent this from happening? ...

javascriptvue.js

Is it the same item in one situation, but a completely different item in another?

I am currently investigating the behavior of objects in JavaScript, particularly when it comes to copying one object onto another. It seems that sometimes they behave as if they are the same object, where modifying one also modifies the other. Many resourc ...

javascriptvue.jsvue-component