4

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?

Douglas Gaskell
  • 9,017
  • 9
  • 71
  • 128

1 Answers1

2

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$/]
    }}));
JSchirrmacher
  • 3,243
  • 2
  • 19
  • 27
Brian Lee
  • 17,904
  • 3
  • 41
  • 52
  • Hi, is the `merge` call in error in that example? That's not something that I have defined. I imagine it's merging the objects, but I don't want to make any assumptions with webpack... – Douglas Gaskell Jan 14 '19 at 19:39
  • Nope, [merge](https://github.com/neutrinojs/webpack-chain/blob/master/README.md#chainedmap) is a method available through chainmap. The `merge` in the answer is actually verbatim from the documents. – Brian Lee Jan 14 '19 at 20:35
  • Gotcha. Not sure why the docs use `merge` by itself, I get an error that merge is not defined. I need to use `config.merge()`. Though that throws the error `omit.includes is not a function`... – Douglas Gaskell Jan 14 '19 at 20:56
  • Note, the `omit.includes is not a function` is my fault. I have a `,` at the end of my chain. If you update your answer with the additional `options()` info from [here](https://github.com/neutrinojs/webpack-chain/issues/138) I will accept your answer. – Douglas Gaskell Jan 14 '19 at 21:24
  • I'm not sure why they use merge that way either, maybe it's just assumed to be destructured from the config object. That GitHub thread is a good resource with clear examples, thanks for linking it! – Brian Lee Jan 14 '19 at 22:03