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 :)