Ts-loader: Module build failed: TypeError: Cannot read property 'afterCompile' of undefined

[James34Shaw100]

I've just installed this module to use with Laravel's Mix that uses Webpack under the covers. Followed guide for setup here: https://sebastiandedeyne.com/posts/2017/typescript-with-laravel-mix

I'm getting a similar error to:

728

Module build failed: TypeError: Cannot read property 'afterCompile' of undefined
at successfulTypeScriptInstance (/.../node_modules/ts-loader/dist/instances.js:147:27)
at Object.getTypeScriptInstance (/.../node_modules/ts-loader/dist/instances.js:48:12)
at Object.loader (/.../node_modules/ts-loader/dist/index.js:16:41)

[johnnyreilly]

It sounds like one of the things in the mix isn't webpack 4... I'll leave this open for now but I suspect this isn't a ts-loader issue.

[James34Shaw100]

Tested switching from manual configuration to simpler built-in ts support in Mix support. webpack.mix.js now looks like this:

let mix = require('laravel-mix');
mix.autoload({
    'jquery': ['$', 'window.jQuery', 'jQuery'],
    'vue': ['Vue','window.Vue'] 
});
mix.webpackConfig({
    resolve: {
        alias: {
            '@': path.resolve('resources/assets/sass'),
        }
    }
});
mix.js('resources/assets/js/bootstrap.js', 'public/js').version();
mix.js('resources/assets/js/app.js', 'public/js').version();
mix.ts('resources/assets/js/admin.ts', 'public/js').version();

mix.sass('resources/assets/sass/app.scss', 'public/css').version()

mix.copyDirectory('resources/assets/images', 'public/images');
mix.copy('node_modules/trumbowyg/dist/ui/icons.svg', 'public/css');

mix.then(function () {
    require('child_process').exec('php artisan laroute:generate', null, (error, stdout, stderr) => {
        if (error) {
            throw error;
        }
        console.log(stdout);
    });
});

I also stripped down admin.ts to just:

import Vue from 'vue'
const app = new Vue({
    el: '#app'
});

to make sure there wasn't any actual errors for it to run in to. But still nothing.

[griffonn]

Also happens while running webpack right away:

webpack --config webpack.config.js
ERROR in ./index.ts Module build failed: TypeError: Cannot read property 'afterCompile' of undefined

Config:

const path = require('path');

module.exports = {
    entry: './index.ts',
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'output.js',
        path: path.resolve(__dirname, 'dist')
    }
};

[johnnyreilly]

Whenever you see Cannot read property 'afterCompile' of undefined it probably means ts-loader is dealing with webpack 3 not webpack 4.

[johnnyreilly]

Maybe install ts-loader 3.5.0 if you're not using webpack 4?

[johnnyreilly]

Maybe install ts-loader 3.5.0 if you're not using webpack 4?

[James34Shaw100]

Can confirm it was a versioning issue. Laravel Mix is presently still on older version of webpack at time of writing. TypeScript compiler was able to run once I swapped out for the 3.5.0 version of ts-loader.

[johnnyreilly]

Thanks for confirming!

[an5rag]

Saved me from endlessly trying different options - thanks @johnnyreilly!

[liu2080019]

@johnnyreilly thank u````

[johnnyreilly]

My pleasure!

[boogie4eva]

Thanks @johnnyreilly This worked for me .

[sakalys]

For those coming from angular 5+ world. This means that you must install ts-loader v3.x if ng -v says that webpack version is 3.x.