Odtnhj

I'm using webpack@4.16.1, webpack-dev-server@3.1.4 and ts-loader@4.4.2.

I use Interface/index.ts to manage imports, to organize multiple interface imports.

But When I change interface file, webpack-dev-server(or ts-loader, I don`t know) not reload & transpile changed interface file.

Interface/IHelloState.ts

export interface IHelloState 
 message: string;

Interface.index.ts

export IHelloState from "./IHelloState";

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import "./index.css";
import IHelloState from "./Interface";

const helloState: IHelloState = 
 message: "hello!"
;

ReactDOM.render(<div>helloState.message</div>, document.getElementById("root"));

When I change Interface/IHelloState.ts like:

Interface/IHelloState.ts

export interface IHelloState 
 // message: string;

Nothing happens. Not even "[HMR] Checking for updates on the server..." or "[HMR] Nothing hot updated." shows.

When I change Interface/IHelloState.ts and index.tsx like:

Interface/IHelloState.ts

export interface IHelloState 
 message: string;
 state: boolean;

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import "./index.css";
import IHelloState from "./Interface";

const helloState: IHelloState = 
 message: "hello!",
 state: true
;

Now and error reports.

[tsl] ERROR in (PATH...)index.tsx(8,5)
 TS2322: Type ' message: string; state: boolean; ' is not assignable to type 'IHelloState'.
 Object literal may only specify known properties, and 'state' does not exist in type 'IHelloState'.

What should I change?

I run webpack-dev-server with webpack-dev-server --config webpack.dev.config.js --hot.

This is my config file.

webpack.dev.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = Object.assign(require("./webpack.base.config"), 
 entry: [
 path.join(__dirname, "src/app/index.tsx"),

 "webpack/hot/only-dev-server"
 ],

 output: 
 path: path.join(__dirname, "build/app"),
 filename: "static/js/bundle.[hash].js"
 ,

 module: 
 rules: [
 
 test: /.jsx?$/,
 loader: "babel-loader"
 , 
 test: /.tsx?$/,
 loader: "ts-loader",
 options: 
 configFile: "tsconfig.app.json"
 
 ,
 
 test: /.css$/,
 use: [
 "style-loader",
 
 loader: "css-loader",
 options: 
 modules: false
 
 
 ]
 ,
 
 exclude: [/.tsx?/, /.jsx?$/, /.html$/, /.css$/, /.json$/],
 loader: "file-loader",
 options: 
 name: "static/files/[hash].[ext]"
 
 
 ]
 ,

 resolve: 
 extensions: [".ts", ".tsx", ".js", ".jsx", ".css", ".json"]
 ,

 plugins: [
 new HtmlWebpackPlugin(
 template: path.join(__dirname, "src/app/index.html")
 ),

 new webpack.HotModuleReplacementPlugin()
 ],

 devServer: 
 historyApiFallback: 
 index: "/"
 
 ,

 target: "electron-renderer",

 mode: "development"
);