How to use webpack-chain to add appendTsSuffixTo options to ts-loader?

Question

Simply put, how do I use webpack-loader to add the following option to the ts-loader plugin:

options: {
  appendTsSuffixTo: [/\.vue$/]
}

Currently I have this setup for ts-loader (the top part is here for context). the bottom config.plugin call is the area giving me trouble.

    chainWebpack: config => {
      config.module
        .rule('typescript')
        .test(/\.tsx?$/)
        .exclude
          .add(/node_modules/)
          .end()
        .use('ts-loader')
          .loader('ts-loader'),

      config
        .plugin('ts-loader')
        .tap( args => { return { appendTsSuffixTo: [/\.vue$/] } }
        )
    }

But this throws an exception:

Cannot read property '__expression' of undefined

The webpack-loader docs don't describe exactly what should be done when adding the option.

What do I need to do to add this option?

Answer 1

Look into the section on modifying options for loaders:

config.module
  .rule('typescript')
  .use('ts-loader')
    .tap(options => merge(options, {
      appendTsSuffixTo: [/\.vue$/]
    }));

Update

Here's the relevant docs for merging objects.

This GitHub thread provides good examples.

// preserve existing options
config.module
  .rule('typescript')
  .use('ts-loader')
    .tap(options => ({ ...options, {
      appendTsSuffixTo: [/\.vue$/]
    }}));