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

Convert checkbox choices to strings stored in an array within an object

I have a intricate object structure JSON{ alpha{ array1[ obj1{}, obj2{} ] } } In addition to array1, I need to include another array: array2 that will only consist of strin ...

javascriptarraysangulartypescriptangular8

The HTML tag auto-complete feature is not functioning properly when using Vue InertiaJS

Currently, I am working with Laravel and using inertia-vue. The issue I am facing is that when I include an HTML tag within the .vue files, auto-complete does not function. I have already installed extensions like vetur, vue 3 snippets, and vue-helper in a ...

laravelvue.jsautocompletevuejs3inertiajs

What could be the reason for the react hook form failing to capture the data upon submission?

I am struggling to access the props' value after clicking the button, as it keeps returning undefined. My goal is to display the years of service and profession details based on the user's selection. return ( <form onSubmit={handleSubmit(o ...

typescriptvisual-studio-codematerial-uireact-hook-formcodesandbox

How to enable Autocomplete popper to expand beyond the menu boundaries in Material UI

Within my Menu component, I have an Autocomplete element. When the Autocomplete is clicked, the dropdown list/Popper appears but it's confined within the Menu parent. How can I make it so that the Autocomplete's dropdown list/Popper isn't re ...

javascriptreactjstypescriptmaterial-ui

Eliminate the unnecessary code repetition in my functions using Typescript

I have 2 specific functions that manipulate arrays within an object. Instead of repeating the same code for each array, I am looking for a way to create reusable functions. Currently, my functions look like this: setLists(): void { if (this.product.ord ...

javascripttypescript

When updating a form, it is essential to display select box data from the database effortlessly. It is also important to ensure that the select box data's id is

In my current project, a quasar (vuejs) app, I am faced with an issue related to an update form functionality. The challenge I am encountering is that when I submit the form without making any changes to the select box, it submits the label as a string ins ...

vue.jsquasar-frameworkquasar

Troubleshooting a Bootstrap 4 Dropdown issue within a Laravel-Vue single page application

Spa.blade.php file <!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <title>SPA</title> <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,4 ...

laravelvue.jsbootstrap-4popper.js

What is the best way to invoke a function in a specific child component from its parent component?

It seems that I might have provided too much information, but the main question remains: how can I call a method in the child component from the parent template's click() event. <button(click)='get()'>GET</button> In my case, th ...

angulartypescript

Unable to fulfill the return type requirement in a typed TypeScript function

In this scenario, let's consider the following type: export type Transformer = <T extends any[], U>( data: T, ) => U; Now, let's examine a function that needs to adhere to this type: export const transform: Transformer = ( d ...

typescript

Automatically assigning a default dynamic value to a dropdown option using Vue.js

I need to set a default selected value for the select option element, but I am facing difficulty in achieving the desired result. <template> <select v-model="tutor_work.start_year"> <option>{{tutor_work.start_year}}< ...

javascriptvue.jsvue-componentvuejs3

VS Code using Vue is displaying an error message stating: The property '' does not exist on type '{}'.ts(2339)

While working in Visual Studio Code, I came across the following code snippet: <script lang="ts" setup> const parseCSV = () => { // Code omitted for brevity } } </script> <template> <button @click="parseCSV ...

typescriptvue.jsvisual-studio-code

The expected property 'label' is not found in the object type '{ handleClick: () => void; }', but it is required in the object type '{ handleClick: () => void; label: string; }'

I'm encountering difficulties when describing the types of my props. The issue arises with the following code: <PostButton handleClick={props.upvote}/> <PostButton2 handleClick={props.downvote}/> An error message is displayed: Pro ...

reactjstypescripttypesjsxnext.js

A guide on creating a concatenation function using TypeScript

Looking for a way in Typescript to define an interface Calculator that allows for concatenation capabilities? interface Calculator { ... } let calcu: Calculator; calcu(2).multiply(5).add(1) I attempted the following: interface Calculator { (num: n ...

typescriptfunctionconcatenation

Error message "Cannot find children property on type IntrinsicAttributes & RefAttributes<unknown>" occurring in a React component due to a Typescript issue

Issue: The specified type '{ children: string; severity: string; sx: { width: string; }; }' is not compatible with the type 'IntrinsicAttributes & RefAttributes'. The property 'children' is missing in the type 'Intri ...

reactjstypescriptmaterial-ui

TypeScript(error:2532): object may be undefined despite null or undefined check

Currently, I am developing a Discord-bot using TypeScript which includes a command to retrieve information from an airport. To do this, users only need to provide the 4-character ICAO code that identifies the specific airport. However, due to potential use ...

typescriptdiscordundefined

How to iterate through properties declared in an Interface in Angular 12?

Before Angular 12, this functioned properly: export interface Content { categories: string[] concepts: Topic[] formulas: Topic[] guides: Topic[] } //this.content is of type Content ['formulas', 'concepts'].forEach(c =&g ...

javascriptangulartypescript

What causes userAgent to be undefined within _app.tsx during the use of getInitialProps?

When I check the code below, I'm encountering userAgent being retrieved as undefined: const userAgent = context.req?.headers['user-agent'] ?? ''; The issue persists with isMobile, where it's also being returned as undefined a ...

typescriptreduxnext.jstypeerrorserver-side

Is this Firebase regulation accurate and suitable for PUT and GET requests in an Angular and Firebase environment?

Creating a system where users can only see their own posts and no one else can access them is my main goal. Authentication along with posting functionality is already in place and working, but I want to implement this without using Firebase restrictions. ...

angulartypescriptfirebase

Error: Property 'content' is not defined and cannot be read

I encountered an issue with a config file while attempting to build with AOT using the command ionic cordova build android --prod Error: ./src/config/.env.ts Module build failed: TypeError: Cannot read property 'content' of undefined at Object ...

angulartypescriptionic2ionic3

Having trouble with adding a listener or making @click work in VueJS?

Apologies for my limited experience with Vue. I am currently facing an issue where one of my click functions is not working as expected for multiple elements. The click event is properly triggered for the #app-icon element. However, the function is not be ...

javascripthtmlvue.js