Ts-loader: Cannot read property 'ts' of undefined

[TomasHubelbauer]

Expected Behaviour

Everything works.

Actual Behaviour

When running webpack-cli I get:

ERROR in ./src/index.ts
Module build failed: TypeError: Cannot read property 'ts' of undefined
    at getLoaderOptions (C:\Users\Tom\Desktop\webpack\node_modules\ts-loader\dist\index.js:71:44)
    at Object.loader (C:\Users\Tom\Desktop\webpack\node_modules\ts-loader\dist\index.js:23:19)

Steps to Reproduce the Problem

(I am using WebPack 4.)

package.json:

{
  …
  "devDependencies": {
    "ts-loader": "^3.5.0",
    "tslint": "^5.9.1",
    "typescript": "^2.7.2",
    "webpack": "^4.0.0",
    "webpack-cli": "^2.0.8"
  },
  "dependencies": {
    "html-webpack-plugin": "webpack-contrib/html-webpack-plugin"
  }
}

src/index.ts:

void async function index(): void {
    console.log("WebPack", webpack());
}();

function webpack(): string {
    return "webpack";
}

webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    plugins: [new HtmlWebpackPlugin()],
    devtool: 'inline-source-map',
    module: {
        rules: [
            { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }
        ]
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ]
    },
    watch: false
};

webpack-cli at this point will lead to the described error.

The relevant location in ts-loader\dist\index.js:71:44:

function getLoaderOptions(loader) {
    const { _module, _compilation, _compiler, fs, ...rest } = loader;
    // differentiate the TypeScript instance based on the webpack instance
    var webpackIndex = webpackInstances.indexOf(loader._compiler);
    if (webpackIndex === -1) {
        webpackIndex = webpackInstances.push(loader._compiler) - 1;
    }
    var loaderOptions = loaderUtils.getOptions(loader) || {};
    var configFileOptions = loader.options.ts || {};
    var instanceName = webpackIndex + '_' + (loaderOptions.instance || configFileOptions.instance || 'default');
    if (utils_1.hasOwnProperty(loaderOptionsCache, instanceName)) {
        return loaderOptionsCache[instanceName];
    }
    validateLoaderOptions(loaderOptions);
    var options = makeLoaderOptions(instanceName, configFileOptions, loaderOptions);
    loaderOptionsCache[instanceName] = options;
    return options;
}

It's the var configFileOptions = loader.options.ts || {}; line.

Location of a Minimal Repository that Demonstrates the Issue.

https://gitlab.com/TomasHubelbauer/bloggo-webpack

[TomasHubelbauer]

I tried changing the rule to { test: /\.tsx?$/, use: { loader: 'ts-loader', options: {} }, exclude: /node_modules/ } but that changed the loader.loaders[0] object in getLoaderOptions, not loader itself.

[johnnyreilly]

Try using ts-loader 4.0.0 (only just released) https://github.com/TypeStrong/ts-loader/releases/tag/v4.0.0

[v6]

Tried upgrading ts-loader to ^4.0.0, to no avail

[v6]

$ webpack --mode production
(node:21938) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
Version: webpack 4.1.1
Time: 548ms
Built at: 2018-3-12 20:57:27
 2 assets
Entrypoint main = bundle.js bundle.js.map
   [0] ./src/app.tsx 277 bytes {0} [built] [failed] [1 error]

ERROR in ./src/app.tsx
Module build failed: TypeError: Cannot read property 'ts' of undefined
    at getLoaderOptions (.../node_modules/ts-loader/dist/index.js:55:44)
    at Object.loader (.../node_modules/ts-loader/dist/index.js:16:19)

[johnnyreilly]

Take a look at one of our examples perhaps

[v6]

Downgrading to v2 worked for me, perhaps because the code I'm working with was made a while ago

[johnnyreilly]

If you're using ts to configure ts-loader you should stop using that and switch to options. It's the webpack way

[davestevens]

I just ran into this problem, switching to webpack v3 resolved this issue.

[vdsabev]

I also bumped into this issue with [email protected], upgrading to [email protected] resolved it.

One detail worth noting - a local package that I used in my web application via npm link included ts-loader. I thought I had installed 4.1.0, when in reality the package was in a different folder and was version 3.5.0. It took me a couple of hours to figure out I was looking in the wrong node_modules folder 😕

So if you're having this issue, make sure that you've installed 4.1.0 in the correct node_modules folder.

[sethen]

Upgrading ts-loader to 4.3.1 fixed my issues with this very same problem.