The Vue and Typescript webpage is not appearing in the GAS sidemenu template

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.

Answer №1

After much trial and error, I finally managed to find a solution to the issue at hand. It appears that the webpack configuration autogenerated by vue cli is not compatible with GAS for some reason.

As a result, I took matters into my own hands and set up my own webpack configuration. You can view the end result on https://github.com/jordisantamaria/gas-vue-typescript

In essence, I customized the webpack setup with loaders for Vue, TypeScript, and other necessary components. Here's a look at how it was done: https://github.com/jordisantamaria/gas-vue-typescript/blob/master/webpack.config.js

Instead of using the vue cli, I opted to run the project with webpack through the following scripts:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I stop a table from resizing in Tailwind CSS?

So, I have created this table <table class="table-fixed border-separate border border-green-800"> <thead class="bg-indigo-800 border-b-2 border-indigo-200 w-full"> <tr> <th ...

How to assign a value to a component variable using props in Vue.js

I am attempting to assign a props value to my component variable. Below is the code I'm working with: export default { props: { // eslint-disable-next-line vue/require-default-prop multiPaginatedTableTitle: { type: Stri ...

Wrapping an anonymous function in a wrapper function in Typescript can prevent the inferred typing

I am encountering an issue with typing while coding: function identity<T>(v: T): T{ return v; } function execute(fn: {(n: number):string}) {} execute((n) => { // type of n is 'number' return n.toFixed(); }) execute(identity(( ...

What is the best way to access a web.config key using Typescript?

Is there a way to retrieve key values in an Angular 2 application using TypeScript? add key="localPath" value="http://localhost:618/" add key="serverPath" value="http://api.azure.net/" I am looking to access the values of "localpath" and "serverpath" in ...

How to initialize data in Vue.js components

I'm working on a Map.vue component and I need to update its data in Vue.js. However, I'm struggling to figure out how to do this: <template> <div> <div class="google-map" :id="mapName"> </div> </div> < ...

Strategies for resolving a mix of different data types within a single parameter

Here, I am setting up the options params to accept a value that can either be a single string or another object like options?: string[] | IServiceDetail[] | IServiceAccordion[]; However, when attempting to map these objects, an error is encountered: Prope ...

Using Vue methods to access data variables for iterating through a loop

I need to access the data() variables data () { return { name: '', manufacturerIds: null, supplierIds: null, categoryIds: null, productIds: null, minPrice: 100, maxPrice: 0, priority: 0, ...

Utilizing Laravel Web and API Routes for an Application integrated with VueJS on the front end

Our team is in the process of building a multi-page application with VueJS as our frontend JavaScript framework and Element.io as our CSS framework. We are not currently exposing any web services or APIs. The application we are developing is responsive, ...

In order to display a particular view whose filename is determined by the database, I must develop a function within the controller. - laravel

In my system, there is a default page and 4 models that can be changed. The filename corresponding to each model is stored in the database, which is where I encountered some issues. I am unable to pass the variable that determines the filename to the retur ...

Arrange the Proxy Array of Objects, the localeCompare function is not available

Encountering an error while attempting to implement ES6 arrayObj.sort(a,b) => a.property.localeCompare(b.property) syntax: Getting TypeError: a.property.localeCompare is not a function. Suspecting that localeCompare might not be in scope, but unsure ...

Oops! Looks like you forgot to provide a value for the form control named <name>. Make sure to fill

I have encountered an issue with a nested operation. The process involves removing an offer and then saving it again as a repeating one. However, the problem arises when I try to use patchValue() on the item in offerList[index] after saving the repeating ...

Transform an operational VueJS component into ReactJS

There's a Vue component that functions perfectly. Now, I am attempting to convert the code to its ReactJS equivalent. My progress so far in React: var ticksArray = Array.apply(null, {length: 27}).map(Number.call, Number); export default class Tim ...

Utilizing Tick formatting in Chart.js with Typescript: A step-by-step guide

When setting Chart.js to use the en-US locale, the scale numbers are formatted optimally. If I try using a tick callback as shown in the documentation: ticks: { callback: function(value) { return value.toString(); } } I notice that the ...

Why is my Vue list not showing the key values from a JavaScript object?

I am struggling to utilize a v-for directive in Vue.js to display the keys of a JavaScript object in a list. Initially, the object is empty but keys and values are populated based on an API call. Here's an example of the data structure (I used JSON.st ...

Steps to automatically show the keyboard when the page is loaded

Currently, I am working on a mobile application using NativeScript-Vue. One issue I encountered is that the keyboard does not automatically display when the page or screen loads. My goal is to have the keyboard show up without the user having to tap on the ...

Creating an outlined effect on a transparent image in a canvas: step-by-step guide

Currently, I am working on creating transparent images using canvas in HTML5 and I would like to incorporate borders into them. The issue I'm facing is that the "Stroke" property does not consider the transparency of the image and applies it as if it ...

Certain Material-UI components appear to lack proper styling

I found a tutorial on how to incorporate material UI into my app at this link: https://mui.com/material-ui/getting-started However, I noticed that some components are not styled as expected and customizing the theme seems to have no effect... This is how ...

Try out NextJS API middleware by running tests with Jest

I have a middleware setup in my NextJS API route, located at /src/middleware/validateData/index.ts. It's used to validate request data using a schema. import { NextApiRequest, NextApiResponse } from 'next'; import schema from './schema ...

The HTMLInputElement type does not contain a property named 'name'

function handleChange(e) { console.log(e.target.name); } <input name="bb" onChange={handleChange} /> Have you ever wondered why the HTMLInputElement element does not have a name attribute in React? ...

Can you explain the mechanics behind the functionalities of @angular and @type dependencies?

This inquiry may have been raised before, but I couldn't uncover all the solutions. If that's the case, my apologies. I have a good grasp on how package.json and dependencies / dev-dependencies function in Node applications. Currently delving i ...