Why does 'jss build' with Vue and Typescript miss out our components in the compiled output?

Question

We're setting up some Vue components so that they are defined to use Typescript via the lang attribute on the script tag: <script lang="ts">.

When running jss start:connected this all behaves as expected. The problem is visible when running jss build - the output server.bundle.js is missing the compiled output of our component.

If we revert the tag to be the otb <script> tag we see the output:

However if we use the lang="ts" attribute, the 'Body Rich Text' component is never included in the bundle.

Why might this be?

Answer 1

You mentioned that it's working in Connected mode, so I'll assume you add a ts-loader config rule to the webpack config declared in /vue.config.js via the configureWebpack method, e.g.

config.module.rules.push({
  test: /\.(ts)?$/,
  loader: 'ts-loader',
  exclude: /node_modules/,
  options: {
    appendTsSuffixTo: [/\.vue$/],
  }
});

However, for the server bundle you'll likely need to make a minor change to the server webpack config as well /server/server.vue.config.js. For reasons that are explained in the comments of that file, the JSS sample adds a null-loader for "not" various file extensions to workaround a conflict with the Vue CLI usage of url-loader for inline assets.

config.module.rules.unshift({
  test: /\.(?!js|vue|html|graphql|gql|png|jpe?g|gif|webp|svg|woff2?|eot|ttf|otf$)[^.]+$/,
  use: {
    loader: 'null-loader',
  },
});

I would suggest adding ts to the list of file extensions for that loader and trying your build again. Hopefully that fixes the issue.

If it does, please feel free to open an issue on the JSS GitHub repo to have the ts extension added to the default config. I don't see a reason it can't be there by default. Or better yet, feel free to submit a PR with the change :)

Answer 2

If anyone is interested in the fix, and how to get TypeScript working with Vue, you need:

1. The updated suggested by Adam (now raised as a PR)
2. The following 2 scripts in vue.config.js
3. Install ts-loader and typescript via npm

The scripts are:

config.module.rules.push({
    test: /\.(ts|tsx)?$/,
    loader: 'ts-loader',
    exclude: /node_modules/,
    options: {
      appendTsSuffixTo: [/\.vue$/],
    }
  });

and

  config.resolve.extensions.push('.ts');