The generated code is unable to import the file compiled by Clasp

Question

The generated code is unable to import the file compiled by Clasp

I am encountering an issue with my TypeScript files in my Google App Project. Here is a breakdown of my files:

src/main.ts


function main(): void {
    console.log('main');
    hello(); 
}

src/other.ts

    console.log('hello world');
}

This setup generates the following in my project:

src/main.gs

var module = module || { exports: exports };
//import {hello} from "./other";
function main() {
    console.log('main');
    (0, other_1.hello)();
}

src/other.gs

var exports = exports || {};
var module = module || { exports: exports };
exports.hello = void 0;
function hello() {
    console.log('hello world');
}
exports.hello = hello;

However, when I try to run the main() function in main.gs, I encounter an error. Check the error message https://i.sstatic.net/2sCzb.png

How can I resolve this issue and make imports work effectively in my clasp project?

typescript google-apps-script clasp

Answer 1

Answer №1

Adjustment Suggestions:

Regarding the code snippet
```
//import {hello} from "./other";
```
and (0, other_1.hello)();, it is worth considering that the issue you are facing might be related to Google Apps Script not supporting the import feature at the moment.
Additionally, in the context of Google Apps Script, if we have a function like
```
function hello() {console.log("hello world");}
```
in a script file named other.gs, it can be directly accessed from another script file such as main.gs.

Based on these observations, how about trying out the following adjustment strategies?

Approach 1:

`main.ts`

function main(): void {
  console.log("main");
  hello();
}

`other.ts`

function hello(): void {
  console.log("hello world");
}

With this adjustment, running the main function will execute both console.log("main") in the main function and
```
console.log("hello world")
```
in the hello function within the Google Apps Script editor.

Approach 2:

This approach involves utilizing Class objects.

`main.ts`

import { Sample } from "./other";

function main(): void {
  console.log("main");
  new Sample().hello();
}

`other.ts`

export class Sample {
  public hello(): void {
    console.log("hello world");
  }
}

By making this adjustment, executing the main function will trigger both console.log("main") in the main function and
```
console.log("hello world")
```
in the hello function using the Google Apps Script editor.

Answer 2

Adjustment Suggestions:

Regarding the code snippet
```
//import {hello} from "./other";
```
and (0, other_1.hello)();, it is worth considering that the issue you are facing might be related to Google Apps Script not supporting the import feature at the moment.
Additionally, in the context of Google Apps Script, if we have a function like
```
function hello() {console.log("hello world");}
```
in a script file named other.gs, it can be directly accessed from another script file such as main.gs.

Based on these observations, how about trying out the following adjustment strategies?

Approach 1:

`main.ts`

function main(): void {
  console.log("main");
  hello();
}

`other.ts`

function hello(): void {
  console.log("hello world");
}

With this adjustment, running the main function will execute both console.log("main") in the main function and
```
console.log("hello world")
```
in the hello function within the Google Apps Script editor.

Approach 2:

This approach involves utilizing Class objects.

`main.ts`

import { Sample } from "./other";

function main(): void {
  console.log("main");
  new Sample().hello();
}

`other.ts`

export class Sample {
  public hello(): void {
    console.log("hello world");
  }
}

By making this adjustment, executing the main function will trigger both console.log("main") in the main function and
```
console.log("hello world")
```
in the hello function using the Google Apps Script editor.

The generated code is unable to import the file compiled by Clasp

Answer №1

Adjustment Suggestions:

Approach 1:

`main.ts`

`other.ts`

Approach 2:

`main.ts`

`other.ts`

Similar questions

Ways to efficiently populate HTML elements with JSON data

Automatically convert user input to MM/DD/YYYY format in typescript as they type the date

Creating intricate structures using TypeScript recursively

The user authentication service indicates that no user is currently logged in

Enhancing class functionality with decorators in TypeScript

Assign a class to an Angular component's host element without any conditions

What are some ways to prevent Visual Studio from adding an extra space in JavaScript code during the build or rebuild process?

Error message: TypeScript: Attempting to access a value from an enum results in an implicit 'any' error for the element

Checkbox: Customize the appearance of the root element

Creating a custom Map type in TypeScript

Error in TypeScript: The type 'Ticket[] | undefined' is not recognized as an array type

Is there a way to retrieve the ReturnType of functions based on a parameter list in Typescript?

Facing an issue with the ng2-carousel component where the left and right arrow icons are

Does Typescript not provide typecasting for webviews?

Encountering an error when trying to access this.$store.state in a basic Vuex

Obtain the ViewContainerRef object from the Component

Effortlessly bring in Typescript namespace from specific namespace/type NPM package within a mono-repository

Creating encoded objects for a content-type of `application/x-www-form-urlencoded`

NGRX refresh does not result in any successful actions

Rendering a child component in the DOM tree with Aurelia StageComponent