Wasp•9mo ago

script in head

I have this section in my main.wasp file: "head: [
"<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />",
"<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />",
"<link rel="icon" href="/favicon.ico" type="image/x-icon" />",
"<script src='https://js.stripe.com/v3/' />",
"<script
src='https://js.stripe.com/v3/pricing-table.js'></script>",
"<stripe-pricing-table pricing-table-id='prctbl_1R6yHpQ3pz8nOT2l4854f2w1'
publishable-key='pk_test_51Qrp2qQ3pz8nOT2laKRMYmvt5sRrXZjXNtDvNjDdgaX8BzFHon4z6thFxuR0ELGv5lZASVUdfEA5FyOcjqyfj1x500sau6o8yH'>
</stripe-pricing-table>",
]"
I am getting the following error:
Parse error:
Unexpected token: "
Expected one of the following tokens instead: '(','[',']','{','import','true','false',<string>,<number>,<number>,'{=',<identifier>
"<script src='https://js.stripe.com/v3/' />",
"<script
src='https://js.stripe.com/v3/pricing-table.js'></script>",

What is the problem?

kapa.ai•3/27/25, 3:33 PM

Hi @cmilazzo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•3/27/25, 3:33 PM

----------------------
The problem is with the syntax in your array. In Wasp, the field expects an array of strings, but there's an issue with how your script tags are formatted.

Looking at the error message, it seems that Wasp is having trouble parsing the quotes within your script tags. This is because in Wasp, strings need to be properly escaped when they contain quotes.

According to the documentation, here's how you should format items in the array:

Customizing the App

Notice how the double quotes within the HTML tags are escaped with a backslash (). You need to do the same with your script tags, and you should use double quotes consistently throughout.

Try changing your section to use escaped double quotes instead of single quotes:

kapa.ai•3/27/25, 3:33 PM

Also note that I've changed the self-closing script tag () to a standard opening and closing tag format (), which is more widely supported.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•3/27/25, 3:33 PM

Sorry @cmilazzo, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

cmilazzoOP•3/27/25, 3:37 PM

Thanks @kapa.ai . Your solution was almost right, but it included some extra ">" at the end of the script lines.

kapa.ai•3/27/25, 3:37 PM

Let me check the knowledge base for you again. One moment!

kapa.ai•3/27/25, 3:37 PM

----------------------
I apologize for the error in my solution. You're right that I included some extra closing brackets at the end of the script tags.

Here's the corrected version of the section with proper escaping and without the extra closing brackets:

Thank you for pointing out the mistake. The key is to use escaped double quotes within the HTML tags and ensure proper HTML syntax for the script tags.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•3/27/25, 3:37 PM

Sorry @cmilazzo, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

Vinny•3/27/25, 8:41 PM

All good @cmilazzo?

cmilazzoOP•4/3/25, 10:29 PM

@Vinny (@Wasp) Yep! :).

hadanator•7/3/25, 1:44 AM

Hijacking this thread, @kapa.ai how do I use a local script in my project to insert into the head of the index.html?

kapa.ai•7/3/25, 1:44 AM

Let me check the knowledge base for you again. One moment!

kapa.ai•7/3/25, 1:44 AM

----------------------
Based on the available knowledge sources, Wasp's field in the declaration allows you to inject additional lines (such as tags) into the of your HTML document. However, the documentation and examples only show usage with external scripts (via a URL) or inline scripts, not with local files from your project directory.

There is no explicit information in the knowledge sources about supporting local script files (e.g., referencing a script from your

public

public

or directory) via the field. The examples all use external URLs, such as:

Customizing the App

If you want to use a local script, the knowledge sources do not specify a supported way to do this directly through the field. You may need to serve your script from the

public

public

directory (so it is accessible at a URL like ) and then reference it with a relative path:

But again, this is not explicitly documented in the provided sources, so there may be limitations or additional steps required.

If you need more advanced or dynamic control, the recommended workaround is to use a React-based solution (such as ) in your root component, as discussed in the Discord thread, but this is for dynamic head management, not static injection from a local file at build time 🙋questionsSetting Environment-specific Values in main.wasp File.

kapa.ai•7/3/25, 1:44 AM

In summary:
The knowledge sources do not explicitly document support for injecting local scripts into the head via the field, but referencing a script placed in the
public
public
directory with a relative path may work.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•7/3/25, 1:44 AM

Sorry @hadanator, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

hadanator•7/3/25, 2:08 AM

@kapa.ai Is there a way to run a production version of the client to see how that script could work?

kapa.ai•7/3/25, 2:08 AM

Let me check the knowledge base for you again. One moment!

kapa.ai•7/3/25, 2:08 AM

----------------------
Yes, you can run a production version of the client locally to test how your script works. According to the documentation, after building your Wasp app with , you can build the web client by navigating to the directory and running:

This will generate a production build of your client in the directory inside . You can then serve these static files locally using a static file server (such as or from npm) to simulate a production environment and see how your script behaves in the production build Deploying the Web Client (frontend).

For example, you could run:

This will serve your production client locally, allowing you to test your script as it would run in production.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•7/3/25, 2:08 AM

Sorry @hadanator, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

Carlos•7/3/25, 7:34 AM

hey @hadanator, we don't generally want people to hijack old answers, i'd prefer if you open a new post with your question. the bot gets triggered on new posts as well. this forum is indexed as a knowledge base, so is not designed to work like an assistant, only as q&a.