I encountered an issue:
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
My project involves Vue, Typescript, and Webpack, but I am unable to find a solution to resolve this error. Here's what I have attempted so far:
- Added
to"vue": { "runtimeCompiler": true }package.json - Utilized
(already implemented)new Vue({render: h => h(MyComponent)}).$mount()
The crucial sections of the code are as follows:
# webpack.config.js
module.exports = {
target: 'node', // To make use of Node API through electron
entry: 'app/index.ts',
output: { path: '/dist', filename: 'frontend.js' },
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
include: /app/,
options: { appendTsSuffixTo: ['/\.vue$/'] }
}
]
},
resolve: {
extensions: ['.ts', '.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
externals: [nodeExternals()]
}
# app/index.ts
new Vue({render: h => h(AppComponent)}).$mount('#app')
# app/components/app.component.ts
@Component({ template: require('./app.component.html') }
export default class AppComponent extends Vue {}
It's worth noting that I do not employ .vue, and the error stems from utilizing
@Component({ template: require('./app.component.html') }Is there a workaround for separating files without relying on template, or can I leverage the compiler-included build?