Vue + Typescript webpage not being visible in GAS sidemenu Template

Question

I have to develop an application for google sides using Vue + Typescript, It's an extra menu extending google sides functionability. Here there is a sample without use Typescript https://github.com/clomie/vue-deploy-gas-sample , and result is shown like this: https://gyazo.com/ed417ddd1c2e4356f502b32a1ed8a55e

I created a simple webpage with Vue and Typescript and configure webpack similar as the sample to generate an html with css/js inline. https://github.com/jordisantamaria/gas-vue-typescript

The problem is when I try it in google sides, It's how its showing: https://gyazo.com/6b630fae515cd3de550de4e40a6db7a9 Html is being generated with the <div id="app"/>, but Vue is not generating the extra html.

If I check console, appears this error:

Uncaught SyntaxError: Unexpected token '>'

Any idea of how to configure webpack to use Vue + typescript with GAS correctly? Here is current webpack configuration with 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'},
        ],
      })
    ]
  }
};

There is an other github sample I checked using currently Vue + Typescript and works as a GAS app, but using it as a sidebar menu gives same error as my source code, this other sample is here: https://github.com/clomie/gas-vue-typescript

Answer 1

Finally I found a way to solve it, seems the problem is webpack autogenerated by vue cli is not working with GAS, Idk why.

So I configured my own webpack. You can see the result in https://github.com/jordisantamaria/gas-vue-typescript

Basically I configured the webpack with loaders for vue, typescript, etc.. like this https://github.com/jordisantamaria/gas-vue-typescript/blob/master/webpack.config.js

And running the project with webpack instead of cli:

"scripts": {
    "serve": "webpack-dev-server --config ./webpack.dev.config.js",
    "build": "webpack --config ./webpack.config.js",
    "build:dll": "webpack --config ./webpack.dll.config.js",
  },