Astro Errors

[etmartinkazoo]

I am getting a blank page with a new install of Astro at: http://localhost:3000/keystatic

The error in the console of the dev tools is:
chunk-LAIVMEBR.js?v=f5460729:66431 Uncaught (in promise) SyntaxError: Unexpected string (at chunk-LAIVMEBR.js?v=f5460729:66431:113)

The actual line of code reads:
((_globalThis$process = globalThis.process) === null || _globalThis$process === void 0 ? void 0 : _globalThis$"development") === "production" ? function instanceOf2(value2, constructor) {

I am using:
Node version 18 LTS. I have also tried Node version 16 LTS. I am installing both with NVM.
Astro 2.6.6
React 18.2.0
@keystatic/astro 0.0.8
@keystatic/core 0.0.107

I am struggling to resolve this. Thank you!

[etmartinkazoo]

The relevant code blocks and files are the following:

1. keystatic.config.jsx in the root directory:

import { config, fields, singleton } from '@keystatic/core'

export default config({
  storage: {
    kind: 'local',
  },
  singletons: {
    homepage: singleton({
      label: 'Homepage',
      path: 'src/content/_homepage',
      schema: {
        headline: fields.text({ label: 'Headline' }),
      },
    }),
  },
})

2. keystatic.page.jsx in the root directory:

import { makePage } from '@keystatic/astro/ui'
import keystaticConfig from './keystatic.config'

export const Keystatic = makePage(keystaticConfig)

3. src/pages/keystatic/[...params].astro

---
import { Keystatic } from '../../../keystatic.page'
---

<Keystatic client:only />

4. astro.config.mjs in root directory

import { defineConfig } from 'astro/config';
import react from "@astrojs/react";

import netlify from "@astrojs/netlify/functions";

// https://astro.build/config
export default defineConfig({
  integrations: [react()],
  output: "server",
  adapter: netlify()
});

Another thought I had that because this is client side JavaScript in React I would need to pay attention to the build step. When I run npm run build I get a few errors:

(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

Another recurring error is found across various node_module packages:

node_modules/@voussoir/icon/dist/voussoir-icon.esm.js (1:0) Module level directives cause errors when bundled, "use client" in "node_modules/@voussoir/icon/dist/voussoir-icon.esm.js" was ignored.

[simonswiss]

Hey! 👋

Are you able to share a GitHub repo with the issue?

I see you use output: server — we need to update the docs, but Astro now has a hybrid rendering mode which makes it easier to use with Keystatic — you simply opt out of static rendering in the Keystatic routes with export const prerender = false.

If you can share a repo, I'll take a look 👍

[etmartinkazoo]

Hi @simonswiss - Thank you so much! I just sent you an invite as a collaborator. I added hybrid for output and used export const prerender = false on the [...params].astro in the Keystatic directory. I really appreciate you having a look. I am on an Apple Silicon MacBook so I don't know if it could have anything to do with ARM architecture.

[etmartinkazoo]

Thank you again for taking a look at this @simonswiss if there is anything else I can do, please let me know.

[etmartinkazoo]

Hi @simonswiss - It started working... I can't quite account for what changed but I did want to let you know. All I can say though is wow, I'm in love with this CMS. We have a site we are launching for an event center in two weeks and will drive the content via Keystatic using Astro for the frontend. Thank you!

[simonswiss]

Amazing — glad it started working, and thank you so much for taking the time to let us know 🙏

You sent the access at the start of my weekend (Friday evening), so I only see this now, but also see that it's apparently working!

[etmartinkazoo]

The only thing that I can discern that may be helpful for others is that I needed to use Nodejs version 16 LTS. Additionally it wasn't working on Safari but did and does work on Firefox and Chrome. This isn't a big deal at the moment as I have asked the client to ensure they are using Firefox or Chrome (Edge works as well because it is build on Chromium) which isn't a problem for them.