Cannot transpile typescript module as a dependency

[javiertury]

This module distributes typescript source files by default. This doesn't integrate well in a setup using webpack, babel and ts-loader, even if allowTsInNodeModules is enabled, vuex-composition-helpers is not excluded in webpack and tsconfig includes the path of this module. The compilation ends "successfully", but the code is not transpiled.

export * from './global'

SyntaxError: Unexpected token export

In #3 there is a mention about importing vuex-composition-helpers/dist. Unfortunately, typings are missing.

Discussion about packaging practices of typescript projects

[davidmeirlevy]

if your project is in TS, you can import the "vue-composition-helpers" directly, or specific functions from "src" and not from "dist". (the "dist" folder is made for the non-ts users).

in your vue.config.js you can add this configuration:

module.exports = {
  transpileDependencies: ['vue-composition-helpers'],
  ... (your other configurations..)
}

update use if it isn't working..

[javiertury]

As far as I know transpileDependencies is a babel exclusive feature and it's not compatible with ts-loader.

I think there are still some significant differences between babel ts transpilation and ts-loader regarding decorators and type checking. The ability to emit declarations is another major difference but does not apply here since intermediate applications won't use vuex.

[davidmeirlevy]

Found the solution from @vue/cli-plugin-typescript:

By default, ts-loader is only applied to files inside src and test directories. If you wish to explicitly transpile a dependency module, you will need to configure webpack in vue.config.js:

module.exports = {
  chainWebpack: config => {
    config
      .rule('ts')
        .include
          .add(/module-to-transpile/)
  }
}

The thought about this library is that we didn't want to transpile the code to a lower / uglier version of JS, and enforce our own transpilation of the code.
Letting you transpile the library makes it smaller, and you can benefit if you have a better tree-shaking.

[javiertury]

@davidmeirlevy thanks for your solution! It was easy to apply to a raw webpack installation as well.

To compile a ts module in a raw webpack installation:

1. The module should be whitelisted in webpack externals
2. The module should be whitelisted in .ts rule. This is really important and should be applied on top of step 1.

The following points didn't apply to me, but someone may still find them helpful.

• Babel is not configured to exclude or ignore external modules in .babelrc
• tsconfig.json is not configured to exclude external modules
• ts-loader has allowTsInNodeModules enabled

Example

module.exports = {
 ...
  externals: [nodeExternals({
    // Whitelist module for webpack (1)
    whitelist: [/^vuex-composition-helpers/]
  })],
  ...
  module: {
    rules: [
      test: /\.ts$/,
      // Whitelist the module for `.ts` rule (2)
      exclude: /node_modules(?!\/vuex-composition-helpers)/,
      use: [
        babelLoader,
        {
          loader: 'thread-loader',
          options: { ... }
        },
        {
          loader: 'ts-loader',
          ...
        }
    ]
  }
}

[davidmeirlevy]

Would you like to add this example and solutions to the README file for other developers to come?

It will be very helpful!

[javiertury]

Sure! #15

[davidmeirlevy]

Thanks!