nuejs
external libraries in <head> in layout.html have errors (Pocketbase & AlpineJS)
Describe the Bug
I'm combining these two external library failures 'cause I suspect the solution will be similar...
I am trying to add both Pocketbase JS SDK https://pocketbase.io/ and AlpineJS https://alpinejs.dev/. I added them to the <head> in layout.html see
https://github.com/bartonhammond/finance/blob/main/%40global/layout.html
The instructions are from https://www.npmjs.com/package/pocketbase as
Browser (manually via script tag)
<script src="/path/to/dist/pocketbase.umd.js"></script>
<script type="text/javascript">
const pb = new PocketBase("https://example.com")
...
</script>
OR if you are using ES modules:
<script type="module">
import PocketBase from '/path/to/dist/pocketbase.es.mjs'
const pb = new PocketBase("https://example.com")
...
</script>
Errors
*. Pocketbase
When my component loads I see this in console (I tried both)
Uncaught SyntaxError: Unexpected token 'export' (at pocketbase.umd.js:1096:1)
or
Uncaught SyntaxError: Unexpected token 'export' (at pocketbase.es.mjs:1:39456)
*. Alpine
The https://alpinejs.dev/start-here Alpine start provides this as proof it's loaded which I have in my component https://github.com/bartonhammond/finance/blob/main/components/listTransactions.dhtml#L13
<h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
And this error
cdn.min.js:1 Alpine Expression Error: message is not defined
Expression: "message"
Environment
- OS: Mac Sonoma
- Nue 1.0.0-RC.2 • Bun 1.2.0
Minimal Reproduction
https://github.com/bartonhammond/finance
Logs & Additional Context
✓ Nue 1.0.0-RC.2 • Bun 1.2.0
✓ Serving site from .dist/dev
✓ http://localhost:8080/
✓ /@global/colors.css
✓ /@global/layout.css
✓ /@global/typography.css
✓ /style/todo.css
✓ /@library/forms.css
✓ index.html
I cannot see this repository: https://github.com/bartonhammond/finance/
The error seems to fire in pocketbase.umd.js — any thoughts/guesses how this relates to Nue?
Thanks
Sorry, here: https://github.com/bartonhammond/finance-nue
I have no idea why this is related to Nue. I searched https://github.com/pocketbase/js-sdk/issues and didn't find anything related.
I use pocketbase here w/ an express project. This is exactly the same file in the nue project - I copied it here.
<!DOCTYPE html>
<html lang="en" data-theme="dark" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<script src="/js/pocketbase.umd.js"></script> <//////////////////////////////////////////////
<script src="https://unpkg.com/[email protected]"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.lime.min.css"
/>
<link rel="stylesheet"
href="css/style.css"/>
</head>
<script>
const POCKETBASE_URL= "{{{POCKETBASE_URL}}}"
</script>
<body class="container" >
{{> header }}
{{{body}}}
<br>
{{> footer }}
</body>
</html>
Sorry, that I didn't check this out until now, I'll probably take a closer look later today.
I think what happened here:
cdn.min.js:1 Alpine Expression Error: message is not defined Expression: "message"
is, that nuekit replaced the contents of { message: 'I ❤️ Alpine' }, because it's between the {} delimiters, and message then is undefined when being parsed by alpine.
This is just a suspicion though.
You can probably use the node package, and let it be bundled.
Create e.g. @global/mypocktebase.js, import node module import PocketBase from 'pocketbase'; const pb = new PocketBase('http://localhost:8080'); console.log(pb) add bundle: ['mypocketbase.js'] to site.yaml, delete .dist, run dev server.
To have objects in attributes, you probably need to do something like this:
<div @name="component">
<h1 x-data="{ JSON.stringify(myobject) }" x-text="message"></h1>
<script>
myobject = { message: 'I ❤️ Alpine' }
</script>
</div>