Typescript + React Tutorial: Cannot read property 'parentCompilation' of undefined

[wolfgangmeyers]

I was following instructions at https://www.typescriptlang.org/docs/handbook/react-&-webpack.html in order to get react and typescript working with webpack. After setting everything up I ran webpack and encountered the following error:

[at-loader] Please install "CheckerPlugin" from "awesome-typescript-loader".

I went to the awesome-typescript-loader readme and made some adjustments to my webpack.config.js. This is what it looks like now:

// We need this plugin to detect a `--watch` mode. It may be removed later
// after https://github.com/webpack/webpack/issues/3460 will be resolved.
var CheckerPlugin = require('awesome-typescript-loader')

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },

    module: {
        loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" }
        ],

        preLoaders: [
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { test: /\.js$/, loader: "source-map-loader" }
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
    plugins: [
        new CheckerPlugin()
    ]
};

Now when I run webpack, I get the following error:

node_modules/awesome-typescript-loader/src/instance.ts:50
    if (compiler.parentCompilation) {
                ^
TypeError: Cannot read property 'parentCompilation' of undefined
    at getRootCompiler (/home/wolfgang/code/golang/src/bitbucket.org/cloudxpartners/gnarwhal/web/node_modules/awesome-typescript-loader/src/instance.ts:50:17)
    at ensureInstanceStore (/home/wolfgang/code/golang/src/bitbucket.org/cloudxpartners/gnarwhal/web/node_modules/awesome-typescript-loader/src/instance.ts:67:24)
    at Object.ensureInstance (/home/wolfgang/code/golang/src/bitbucket.org/cloudxpartners/gnarwhal/web/node_modules/awesome-typescript-loader/src/instance.ts:90:5)
    at compiler (/home/wolfgang/code/golang/src/bitbucket.org/cloudxpartners/gnarwhal/web/node_modules/awesome-typescript-loader/src/index.ts:37:20)
    at new loader (/home/wolfgang/code/golang/src/bitbucket.org/cloudxpartners/gnarwhal/web/node_modules/awesome-typescript-loader/src/index.ts:16:18)
    at Object.<anonymous> (/home/wolfgang/code/golang/src/bitbucket.org/cloudxpartners/gnarwhal/web/webpack.config.js:41:9)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)

Looks like this is related webpack/webpack#3460, opened yesterday. Any ideas how I can work around this in the short-term?

[wolfgangmeyers]

Update - I've updated webpack config and managed to get more errors:

// We need this plugin to detect a `--watch` mode. It may be removed later
// after https://github.com/webpack/webpack/issues/3460 will be resolved.
var loader = require('awesome-typescript-loader')

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },

    module: {
        loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" }
        ],

        preLoaders: [
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { test: /\.js$/, loader: "source-map-loader" }
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
    plugins: [
        new loader.CheckerPlugin()
    ]
};

new set of errors:

[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 1173 errors
Hash: d4a33dcc5a492ed09050
Version: webpack 1.14.0
Time: 3141ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  2.74 kB       0  [emitted]  main
bundle.js.map  2.76 kB       0  [emitted]  main
    + 4 hidden modules

ERROR in [at-loader] node_modules/awesome-typescript-loader/dist/checker/checker.d.ts:1:1 
    Cannot find type definition file for 'node'.

ERROR in [at-loader] node_modules/awesome-typescript-loader/dist/checker/checker.d.ts:2:31 
    Cannot find module 'child_process'.

ERROR in [at-loader] node_modules/awesome-typescript-loader/dist/checker/send.d.ts:1:1 
    Cannot find type definition file for 'node'.

ERROR in [at-loader] node_modules/awesome-typescript-loader/dist/checker/send.d.ts:2:30 
    Cannot find module 'child_process'.

ERROR in [at-loader] node_modules/awesome-typescript-loader/dist/checker/send.d.ts:6:73 
    Cannot find namespace 'NodeJS'.

ERROR in [at-loader] node_modules/awesome-typescript-loader/dist/instance.d.ts:1:1 
    Cannot find type definition file for 'node'.

[roysanchez]

I too got this error, manage to continue working by regressing to version 3.0.0-beta.12.

[pkupiec]

I had the same issue

Upgrading node to v7.2.1 helped me

[wolfgangmeyers]

Also when I install @types/node to resolve the missing definitions, I get errors about duplicate declarations:

[at-loader] node_modules/@types/node/index.d.ts:26:11 
    Cannot redeclare block-scoped variable 'Error'.

[wolfgangmeyers]

typescript-react-example.zip

I managed to get everything working by freezing awesome-typescript-loader to 3.0.0-beta.12 and freezing typescript to 2.0.10. Attached is a working project using react and typescript as described at https://www.typescriptlang.org/docs/handbook/react-&-webpack.html, with these additional changes made. Install webpack globally, run npm install, and then running webpack should build the project. Note that it seems to hang, but it does build the project successfully.

[travislaynewilson]

This is actually affecting me when I'm using Angular 2.

[s-panferov]

This should be fixed in latest version.

[xeor]

I have the same problem. Pinning the versions like @wolfgangmeyers didn't work in my case.
@s-panferov Should this be fixed in 3.0.0-beta.17 or the next version coming out?

[murugaratham]

+1

[mindjuice]

I am seeing this too, even after updating everything (also tried downgrading as @wolfgangmeyers with no success):

tsc --version: Version 2.1.4
node --version: v7.3.0
awesome-typescript-loader: 3.0.0-beta.17

[nabils]

+1 I am seeing this too. It was working fine on osx but seems to break on windows. Moving back to older/newer versions of nodejs, typescript or awesome-typescript-loader made no difference.

[brianchance]

Having the same issue, based on #304, I commented out CheckerPlugin and the error goes away. Like #304, I have multiple plugins running.

[ghost]

what does the CheckerPlugin do?

[renaco]

Do you tried call as class into curly branches? as this way:
var { CheckerPlugin } = require('awesome-typescript-loader');