webpack 4 support

[sanex3339]

Webpack 4 in beta now, so can you update plugin to support it?

[Delagen]

Please update enhanced-resolve dependency binding

[sanex3339]

Any news?

[s-panferov]

I hope to find some time next weekend.

[DovydasNavickas]

Hey, maybe you need some help? I've started building an updated configuration for all of our projects with webpack 4 and I've encountered some errors right away with awesome-typescript-loader on watch.

As I'm more than familiar with working on build tools and with typescript's compiler API, I think I could help 🙂

[s-panferov]

@DovydasNavickas I would glad if you make some investigation about what we need to do to properly migrate. I know that ts-loader already has some webpack4 support, so maybe we can use results of their's investigation.

[DovydasNavickas]

Snap... ts-loader has a PR with quite a few changes.
https://github.com/TypeStrong/ts-loader/pull/710/files

[DovydasNavickas]

I guess a good starting point is this article:
https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202

[DovydasNavickas]

Ok, so it's an easy fix for a changed Webpack's API instead of compiler.plugin to use compiler.hooks.

So, to not get Webpack's errors we have to update function setupWatchRun in instance.ts line 367:

function setupWatchRun(compiler, instanceName: string) {
-	compiler.plugin('watch-run', function(watching, callback) {
-		const instance = resolveInstance(watching.compiler, instanceName)
+	compiler.hooks.watchRun.tapAsync(PACKAGE_NAME, (compiler, callback) => {
+		const instance = resolveInstance(compiler, instanceName)
		const checker = instance.checker
		const watcher =
-			watching.compiler.watchFileSystem.watcher ||
-			watching.compiler.watchFileSystem.wfs.watcher
+			compiler.watchFileSystem.watcher ||
+			compiler.watchFileSystem.wfs.watcher

-		const startTime = instance.startTime || watching.startTime
+		const startTime = instance.startTime

But then it starts spitting out errors (58 errors in my case, to be exact) in Typescript's typechecking, such as:

ERROR in [at-loader] TS2688: Cannot find type definition file for 'node'.

ERROR in [at-loader] TS2318: Cannot find global type 'Array'.

ERROR in [at-loader] TS2318: Cannot find global type 'Boolean'.

ERROR in [at-loader] TS2318: Cannot find global type 'Function'.

ERROR in [at-loader] TS2318: Cannot find global type 'IArguments'.

ERROR in [at-loader] TS2318: Cannot find global type 'Number'.

ERROR in [at-loader] TS2318: Cannot find global type 'Object'.

ERROR in [at-loader] TS2318: Cannot find global type 'RegExp'.

ERROR in [at-loader] TS2318: Cannot find global type 'String'.

Soo.... It clearly has some problems with compiler configuration before it starts compiling after watch change and I'm not really sure where to start looking. Maybe you could take a look?
I'll spend a bit more time, if you see nothing and don't come up with a quick fix 🙂

By the way, exactly same kind of upgrade has to be done for setupAfterCompile function in line 444. Just not sure what to do with lines 462 and 464 as the parameter coming into tapAsync function is compiler instead of compiler coming as compilation.compiler before.

In short, I'll have to spend a bit more time to get a good sense about how the library works, because I did not manage to come up with a proper debugging strategy apart from npm link the package into a test project using Webpack and console.log interesting bits.
If you have ideas how to have a proper debugging session, I'm happy to hear 😄

[DovydasNavickas]

P.S. now that I think of it, why the hell didn't I go with using tests right away?... I guess sometimes you just don't think on Sundays 😂

[niemyjski]

So I noticed that I get the following error when the following web pack plugin is enabled TsConfigPathsPlugin. I'm using web pack 4.

/app/node_modules/tapable/lib/Tapable.js:63
                throw new Error(`Plugin could not be registered at '${name}'. Hook was not found.\n` +
        ^
Error: Plugin could not be registered at 'module'. Hook was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatiblity layer for this hook, hook into 'this._pluginCompat'.
    at Compiler.plugin (/app/node_modules/tapable/lib/Tapable.js:63:9)
    at Compiler.deprecated [as plugin] (internal/util.js:53:15)
    at ModulesInRootPlugin.apply (/app/node_modules/enhanced-resolve/lib/ModulesInRootPlugin.js:15:11)
    at Compiler.apply (/app/node_modules/tapable/lib/Tapable.js:71:16)
    at Compiler.deprecated [as apply] (internal/util.js:53:15)
    at PathPlugin.apply (/app/node_modules/awesome-typescript-loader/src/paths-plugin.ts:115:22)
    at webpack (/app/node_modules/webpack/lib/webpack.js:37:12)
    at startDevServer (/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:379:16)
    at processOptions (/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:361:5)
    at Object.<anonymous> (/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:504:1)
    at Module._compile (module.js:662:30)
    at Object.Module._extensions..js (module.js:673:10)
    at Module.load (module.js:575:32)
    at tryModuleLoad (module.js:515:12)
    at Function.Module._load (module.js:507:3)
    at Function.Module.runMain (module.js:703:10)