Webpack-hot-middleware: Typescript HMR

[erikakers]

Trying to get Typescript to work with HMR but the Typescript compiler errors on the module.hot definition in index.ts:

if (module.hot) {
  module.hot.accept();
}

Outputted Error:

ERROR in ./client/index.ts
(16,5): error TS2304: Cannot find name 'module'.

This could be more of Typescript configuration error, but I'm wondering if anyone has encountered this setting up the middleware.

[glenjamin]

This is more of a general HMR question, so is best directed at whatever support mechanism https://github.com/webpack/webpack recommends.

What I can say, is it sounds like you'd need a typescript definition for the CommonJS module object, along with the extensions webpack has added. I don't know if such a thing exists, but you could write a short definition for your project which states that the API of http://webpack.github.io/docs/hot-module-replacement.html exists.

[davidmoshal]

+1

[davidmoshal]

This worked:

 tsd install webpack --save    
 tsd install webpack-env --save    

[glenjamin]

oo, nice one.

Anyone fancy sending a PR which adds that to the FAQs on the README?

Will all typescript users know what tsd is?

[davidmoshal]

Still working on it.

At this point we have the typescript definitions, but I'm not actually able to get hmr to work!

Note, I am using Browsersync and,
this is NOT a react project.

Basically I can detect module.hot but module.accept() doesn't stop the whole page reloading.

I've tried many permutations of webpack and Browsersync.

Best I can do is detect the hot module and prevent page reloading but then I don't get the changes.

So if there is a way to manually pull the changes from the client I could probably have this working.

Dave

.

[davidmoshal]

Re tsd: it's apparently deprecated in favor of typings but tsd seems to be better integrated with my ide (intellij).
A lot of this seems to be early stage bleeding edge.

[wefiy]

mark

[qingying]

add @types/webpack-dev, output error "Property 'hot' is missing in type 'Module'",
remove @types/webpack-dev, output error 'Property 'hot' does not exist on type 'NodeModule''
At last, my solution is remove @types/webpack-dev, write 'module.hot' as '(module as any).hot'

[codeBelt]

Fix it by installing @types/webpack-env

[haishengXie0712]

declare const module: any if (module.hot) { module.hot.accept() }

[budiadiono]

This solution works for me:

1. Install @types/webpack-env
2. On tsconfig.json under compilerOptions add "types": ["webpack-env"]