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?
"<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?
10 Replies
Hi @cmilazzo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The problem is with the syntax in your
head array. In Wasp, the head 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 head 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 head section to use escaped double quotes instead of single quotes:
Also note that I've changed the self-closing script tag (<script ... />) to a standard opening and closing tag format (<script ...></script>), which is more widely supported.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
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?Thanks @kapa.ai . Your solution was almost right, but it included some extra ">" at the end of the script lines.
Let me check the knowledge base for you again. One moment! :books:
----------------------
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
head 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 :speech_balloon:
----------------------
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?All good @cmilazzo?
@Vinny (@Wasp) Yep! :).
Hijacking this thread, @kapa.ai how do I use a local script in my project to insert into the head of the index.html?
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the available knowledge sources, Wasp's
The knowledge sources do not explicitly document support for injecting local scripts into the head via the
head field in the app declaration allows you to inject additional lines (such as <script> tags) into the <head> of your HTML document. However, the documentation and examples only show usage with external scripts (via a src 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 or src directory) via the head 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 head field. You may need to serve your script from the public directory (so it is accessible at a URL like /my-script.js) 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 react-helmet-async) 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 Discord support thread: Setting Environment-specific Values in main.wasp File > Answers.
In summary:The knowledge sources do not explicitly document support for injecting local scripts into the head via the
head field, but referencing a script placed in the public directory with a relative path may work.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
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?@kapa.ai Is there a way to run a production version of the client to see how that script could work?
Let me check the knowledge base for you again. One moment! :books:
----------------------
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
wasp build, you can build the web client by navigating to the .wasp/build/web-app directory and running:
This will generate a production build of your client in the build/ directory inside web-app. You can then serve these static files locally using a static file server (such as serve or http-server 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 :speech_balloon:
----------------------
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?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.