I am tasked with developing an application for Google Sides using Vue + Typescript to enhance its functionality with an extra menu feature. You can find a sample without Typescript here. The result is visible in this screenshot: https://gyazo.com/ed417ddd1c2e4356f502b32a1ed8a55e
To tackle the issue, I created a simple webpage with Vue and Typescript and configured webpack similarly as the sample mentioned above to generate an html file with inline css/js. Link to Github repository: https://github.com/jordisantamaria/gas-vue-typescript
However, when testing it on Google Sides, the output doesn't look right. Here's how it appears: https://gyazo.com/6b630fae515cd3de550de4e40a6db7a9 The HTML is being generated with '
', but Vue fails to generate the additional html.If I check the console, I encounter the following error:
Uncaught SyntaxError: Unexpected token '>'Any suggestions on how to configure webpack correctly for utilizing Vue + Typescript with GAS? Below is my current webpack configuration for Vue:
// vue.config.js
// eslint-disable-next-line @typescript-eslint/no-var-requires
const HtmlWebpackPlugin = require("html-webpack-plugin");
// eslint-disable-next-line @typescript-eslint/no-var-requires
const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");
// eslint-disable-next-line @typescript-eslint/no-var-requires
const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
// eslint-disable-next-line @typescript-eslint/no-var-requires
const CopyPlugin = require('copy-webpack-plugin')
// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path')
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.html$/,
loader: "html-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({
inlineSource: ".(js|css)$",
template: "public/index.html",
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: false
},
chunksSortMode: 'auto'
}),
new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
new OptimizeCSSPlugin({
cssProcessorOptions: { safe: true, map: { inline: true } }
}),
new CopyPlugin({
patterns: [
{ from: 'gas'},
],
})
]
}
};
I also came across another Github sample that successfully integrates Vue + Typescript as a GAS app, but the same error persists when used as a sidebar menu. You can view the other sample here.