Ts-loader: webpack --watch do not detect changes in files that only export TS interfaces/types etc.

[webpack-bot]

Bug report

What is the current behavior?
I believe this issue has been reported in a closed issue (https://github.com/webpack/webpack/issues/8734)
therefore, report again for visibility:
_When the only thing a Typescript file exports is an interface, changes to the interface are not seen by watch_

I believe files only contain interfaces contain no real Javascript and that is the issue that webpack is not able to detect any changes while transpilation.

Tried the workaround with comments that didn't fix the issue, the only way I were able to get the type only file trigger the build is to have a export { a: 'a' } then import { a } from './typeOnly.ts' - which is not ideal and not practical.

If the current behavior is a bug, please provide the steps to reproduce.
Create a file that only export interface/types:
props.ts

interface Props {
  name: string
}

export default Props

Then create anther file that import props.ts:
component.ts

import React, { FunctionComponent } from 'react';
import Props from './props';

const MyComponent: FunctionComponent<Props> = ({ name }) => (
  <div>{ name }</div>
);

Modify props.ts, either add/change/delete properties in Props then apply those changes to component.ts

Webpack not able to detect the changes in props.ts and the type errors report error on the UI.

See screenshot attached below for example:

https://github.com/kenilam/Ki.CL is my repos where you can reproduce.

What is the expected behavior?
Webpack watch should be able to pick up file changes that only contain type values

Other relevant information:
webpack version: 4.43.0
Node.js version: 14.4.0

---

This issue was moved from webpack/webpack#11121 by @sokra. Original issue was by @kenilam.

[johnnyreilly]

No it is not.

---

From: Keni [e-mail]
Sent: 05 July 2020 19:00
To: TypeStrong/ts-loader [e-mail]
Cc: Subscribed [e-mail]
Subject: Re: [TypeStrong/ts-loader] webpack --watch do not detect changes in files that only export TS interfaces/types etc. (#1138)

@sokrahttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fsokra&data=02%7C01%7C%7C421d7dc4c62f42ec7ea108d821159fd2%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637295724036393689&sdata=0coCKqmw53Ty02tx8DrIvxpLgQGqUiKWszZgund2hqs%3D&reserved=0 i actually deprecated ts-loader and migrated to es-loader few weeks ago. But to be fair, this behaviour also happen in ts-loader

That also raise a second question, is ts-loader deprecating?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHubhttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FTypeStrong%2Fts-loader%2Fissues%2F1138%23issuecomment-653925897&data=02%7C01%7C%7C421d7dc4c62f42ec7ea108d821159fd2%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637295724036403687&sdata=ceizOe4RPw4%2BWWxEOdXFha77eegTSpUDFl8LUb4blVc%3D&reserved=0, or unsubscribehttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAAHWWXOOBNII4FU73IKTK2LR2DETFANCNFSM4OQ4RRMQ&data=02%7C01%7C%7C421d7dc4c62f42ec7ea108d821159fd2%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637295724036403687&sdata=9SqugttygMy%2Bm1szJKIdk0wubSk2FThYk2YIm47SL3M%3D&reserved=0.

[kenilam]

@jbrantly it turn out it is my lack of Webpack and ts-loader knowledges

I just need to include "importsNotUsedAsValues": "preserve" option to the compiler options in the tsconfig.json.

https://www.npmjs.com/package/fork-ts-checker-webpack-plugin#type-only-modules-watching

Please close this Issue if needed! Thanks

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

Closing as stale. Please reopen if you'd like to work on this further.