SyntaxError: Unexpected reserved word #36

akukalev · 2024-01-18T09:27:13Z

Hello! I really love your app. I would like to add it to an existing Telegram chat to improve interactions between the members of a small team. So, I tried to follow your instructions, but I got a Syntax error while building the web app:

path/bla/bla/notepher-bot/web-app/node_modules/vite/bin/vite.js:7
await import('source-map-support').then((r) => r.default.install())
^^^^^

SyntaxError: Unexpected reserved word

Unfortunately, I do not have much skills with npm and java, I use python and would not be able to solve it. Can you please have a look? Thanks a lot!

deptyped · 2024-01-19T12:51:14Z

Hello. Can you please describe exact steps to reproduce the problem?

akukalev · 2024-01-19T19:26:31Z

Ok, an update. First I tried to do it on my desktop PC with Ubuntu 22.04 LTS and I got the error message described above. Now, I run "npm run build" in a virtual machine with the latest version of Ubuntu OS and this time it worked! I placed the contest of dist folder to the hosting provider web site and have set the menu button via @Botfather as you described.
However, I do not understand what to do next. What shall I do with .env file after I specified BOT_TOKEN and WEB_APP_URL? Where should I launch the bot? Sorry, probably this is very naive questions.

deptyped · 2024-01-19T21:10:23Z

I placed the contest of dist folder to the hosting provider web site and have set the menu button via @Botfather as you described.

At this point, bot should have a button to launch the app, like the "Notes" button in @NotepherBot

What shall I do with .env file after I specified BOT_TOKEN and WEB_APP_URL? Where should I launch the bot?

On any NodeJS hosting you choose, it can be a serverless platform or your VPS server. Just upload the files and run npm start.
Note that this step is optional, the web app is fully functional without this step. This application is needed to make a bot respond to commands such as /start. If the "Notes" button is enough for you, just skip these steps

akukalev · 2024-01-19T21:19:39Z

At this point, bot should have a button to launch the app, like the "Notes" button in @NotepherBot

Yes, this worked just fine. But it opens an empty page and I can't create any new notes there.

On any NodeJS hosting you choose, it can be a serverless platform or your VPS server. Just upload the files and run npm start.

O, I see!.. the files from dist folder I uploaded to a normal hosting, just created a new folder on a web-site, where I have a wordpress installation. I will read more about VPS servers and check your link! Thank you and sorry for the naive questions. App building is not my cup of tea, unfortunately.

Notes button should be totally enough for me... however something is still not right, or it does not look right to me, because I just get an empty page when I click Notes button.

deptyped · 2024-01-19T21:50:32Z

...the files from dist folder I uploaded to a normal hosting, just created a new folder on a web-site, where I have a wordpress installation

Make sure there is an index.html file in this folder. And other files from the list below:

Make sure you specify the correct link for the menu button. Try opening the link in your browser and check the source code, it should look like this:

akukalev · 2024-01-19T22:07:35Z

Well... yes. The ending of file names are different, but overall the structure is identical.

assets/index-5df35b37.css
assets/index-d4b9f7a8.js
assets/workbox-window.prod.es5-a7b12eab.js
index.html
sw.js
workbox-7cfec069.js|
manifest.webmanifest

The code of the index.html also looks like yours:

<html>
<body>
<!--StartFragment-->
  | <!DOCTYPE html>
-- | --
  | <html lang="en">
  |  
  | <head>
  | 
  | <link rel="icon" href="/favicon.ico">
  | <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
  |  
  | <title>Notepher Mini App</title>
  | <script type="module" crossorigin src="/assets/index-d4b9f7a8.js"></script>
  | <link rel="stylesheet" href="/assets/index-5df35b37.css">
  | <link rel="manifest" href="/manifest.webmanifest"></head>
  |  
  | <body>
  | <div id="app"></div>
  | <script src="https://telegram.org/js/telegram-web-app.js"></script>
  |  
  | </body>
  |  
  | </html>

<!--EndFragment-->
</body>
</html>

However, when I click on the Notes button it gives me an empty page and once I add the bot to an existing chat then nothing happens. I repeated all steps one more time, creating another bot with BotFather and copy-pasted the link to the index.html, but it's the same outcome

deptyped · 2024-01-19T22:11:30Z

Hmm.. let me guess. Perhaps it is because of absolute paths, make this change to make paths relative and rebuild the web app

akukalev · 2024-01-19T22:22:33Z

Thanks for the help... but nothing changed! :(( I updated web-app/vite.config.ts, rebuild the app, copied the new files over ftp to the server.... the same.
I can do git clone again and then rebuild the app. Just in case it helps...

deptyped · 2024-01-19T22:36:51Z

You can try to open the web app in https://web.telegram.org to see exactly what error occurs using browser devtools.

akukalev · 2024-01-19T22:55:12Z

Good idea! So, what it says is the following:

"Some resources are blocked because their origin is not listed in your site's Content Security Policy (CSP). Your site's CSP is allowlist-based, so resources must be listed in the allowlist in order to be accessed."

And below:

Resource | Status | Directive | Source Location
data | blocked | connect-src | InfiniteScroll.tsx:136

Also it says

"This page failed to load a stylesheet from a URL."

In other words it seems to be related to the settings of WordPress. It seems that I need to google a bit more about it :))

akukalev · 2024-01-20T18:38:33Z

Sadly, but I will probably give up... it seems to be too complex and I do know why things are not working. Briefly, I created Amazon AWS instance to host the app and all steps of your manual worked fine.

However, most importantly I deployed the output resources to 3 different web-sites (always updating /setmenubutton command) and the bot still never worked for me in Telegram. I just get white empty page all the time after click on Notes button... so regardless of sucessfully running the app on Amazon AWS it does not seem to work at a more basic level for some weird reason :(

deptyped · 2024-01-20T23:02:37Z

I deployed the output resources to 3 different web-sites

Have they always been placed in a subfolder?

akukalev · 2024-01-21T10:55:17Z

Have they always been placed in a subfolder?

Yes, but I also changed all paths in the index.html file from "/assets/" to "/notepher/assets/". Would it not be enough?

I believe this is about that CSP policy. I also registered yesterday for a free hosting at Infinityfree.com and will try to place the app resources there once DNS servers will get updated. My assumption is that free resource might have different policies than paid web-hosting.

akukalev · 2024-01-21T15:05:05Z

An update: the web-app works perfectly on a free web hosting! but it does not work on my paid hosting :(( This feels to stupied, but at-least I know that the code is fine and I did not do anything wrong. The bot works now for me as web-app. I also have the bot running at amazon instance. I need to link it to the group chat so all my collegues would be able to access it. It's in production mode, I specified BOT_TOKEN and WEB_APP_URL

Do you mind if I ask one more question? Could you please clarify and provide an example of what I have to specify for BOT_WEBHOOK?

deptyped · 2024-01-22T04:17:48Z

Could you please clarify and provide an example of what I have to specify for BOT_WEBHOOK?

BOT_WEBHOOK is used as the url parameter when calling setWebhook when launching a bot in webhook mode.

You must specify a URL pointing to running web server + bot token as the path. For example, if web server is running at https://example.org, you must specify https://example.org/YOUR_BOT_TOKEN in BOT_WEBHOOK.

Webhook can be quite tricky to setup, another option is to use polling mode (which doesn't require a web server, https and other stuff) with @grammyjs/runner plugin which makes polling mode suitable for production. I've prepared a branch with an example for you:
https://github.com/deptyped/notepher-bot/compare/36-runner-example

Just set BOT_MODE to runner and it should work fine, you don't need to set BOT_WEBHOOK anymore.

akukalev · 2024-01-22T10:20:18Z

You must specify a URL pointing to running web server + bot token as the path. For example, if web server is
running at https://example.org/,

Ok... that's what I understood as well, but then it's not clear to me how telegram knows about where the bot is running. You said "This application is needed to make a bot respond to commands such as /start", but the only information I give to telegram is about web server https. The application can get the information from the web-server due to .env variables. How does the telegram chat or the web-server get the information from the app?

Thanks a lot for the example with runner plugin! I can understand how the data communication works there.

deptyped · 2024-01-23T09:38:24Z

...it's not clear to me how telegram knows about where the bot is running. You said "This application is needed to make a bot respond to commands such as /start", but the only information I give to telegram is about web server https.

Yes, Telegram sends bot updates to web server address you specify (in BOT_WEBHOOK). In general, the process looks like this:

The application can get the information from the web-server due to .env variables. How does the telegram chat or the web-server get the information from the app?

What information do you mean? I'm not sure I understand your question

Just to clarify, the web application (located in web-app/) does not communicate in any way with the application located in the root, which runs the web server and handles updates from Telegram (such as the /start command).

akukalev · 2024-01-23T23:05:04Z

Just to clarify, the web application (located in web-app/) does not communicate in any way with the application located in the root, which runs the web server and handles updates from Telegram (such as the /start command).

Sorry, this is exactly what I find confusing because in step 4 you wrote "Set the WEB_APP_URL environment variable with the URL obtained during the web app deployment (step 2)", but then you say that web-app does not communicate in any way with the application.

akukalev · 2024-01-25T20:55:44Z

Hi, it's me again! I tried many options to create a fully functional bot and they all failed with different kind of errors... however I kind of like Netlify platform. If one day you will get bored and decided to be-friend you fantastic app with Netlify... Just let me know :) A short manual explaning the settings for deployment will be amazing.
Of course, I also understand if this will never happen! Thanks a lot for your time!

gamberoillecito · 2024-02-22T11:56:55Z

@akukalev check out my last issue, maybe it could help you

This comment was marked as spam.

Sign in to view

github-staff deleted a comment Oct 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SyntaxError: Unexpected reserved word #36

SyntaxError: Unexpected reserved word #36

akukalev commented Jan 18, 2024 •

edited

Loading

deptyped commented Jan 19, 2024

akukalev commented Jan 19, 2024 •

edited

Loading

deptyped commented Jan 19, 2024

akukalev commented Jan 19, 2024 •

edited

Loading

deptyped commented Jan 19, 2024

akukalev commented Jan 19, 2024 •

edited

Loading

deptyped commented Jan 19, 2024

akukalev commented Jan 19, 2024

deptyped commented Jan 19, 2024

akukalev commented Jan 19, 2024

akukalev commented Jan 20, 2024 •

edited

Loading

deptyped commented Jan 20, 2024

akukalev commented Jan 21, 2024

akukalev commented Jan 21, 2024 •

edited

Loading

deptyped commented Jan 22, 2024

akukalev commented Jan 22, 2024 •

edited

Loading

deptyped commented Jan 23, 2024

akukalev commented Jan 23, 2024

akukalev commented Jan 25, 2024

gamberoillecito commented Feb 22, 2024

This comment was marked as spam.

SyntaxError: Unexpected reserved word #36

SyntaxError: Unexpected reserved word #36

Comments

akukalev commented Jan 18, 2024 • edited Loading

deptyped commented Jan 19, 2024

akukalev commented Jan 19, 2024 • edited Loading

deptyped commented Jan 19, 2024

akukalev commented Jan 19, 2024 • edited Loading

deptyped commented Jan 19, 2024

akukalev commented Jan 19, 2024 • edited Loading

deptyped commented Jan 19, 2024

akukalev commented Jan 19, 2024

deptyped commented Jan 19, 2024

akukalev commented Jan 19, 2024

akukalev commented Jan 20, 2024 • edited Loading

deptyped commented Jan 20, 2024

akukalev commented Jan 21, 2024

akukalev commented Jan 21, 2024 • edited Loading

deptyped commented Jan 22, 2024

akukalev commented Jan 22, 2024 • edited Loading

deptyped commented Jan 23, 2024

akukalev commented Jan 23, 2024

akukalev commented Jan 25, 2024

gamberoillecito commented Feb 22, 2024

This comment was marked as spam.

akukalev commented Jan 18, 2024 •

edited

Loading

akukalev commented Jan 19, 2024 •

edited

Loading

akukalev commented Jan 19, 2024 •

edited

Loading

akukalev commented Jan 19, 2024 •

edited

Loading

akukalev commented Jan 20, 2024 •

edited

Loading

akukalev commented Jan 21, 2024 •

edited

Loading

akukalev commented Jan 22, 2024 •

edited

Loading