S
SolidJS•3w ago
Aaron

Getting SSG to work nicely

Hey everyone, I'm facing an issue when trying to get SSG working. I am currently using Sanity and want to prerender all the routes to static html. I'm using vercel for production. This is my current setup: app.config.ts 
import { defineConfig } from '@solidjs/start/config'

export default defineConfig({
  server: {
    prerender: {
      crawlLinks: true,
    },
  },
})
import { defineConfig } from '@solidjs/start/config'

export default defineConfig({
  server: {
    prerender: {
      crawlLinks: true,
    },
  },
})
If i run a bun run build it serves a good build that works locally, when i deploy to vercel that's where the issue lies. I get static pages working, but all styles are lost: 
The stylesheet https://www.website.com/_build/assets/client-DlFybg74.css was not loaded because its MIME type, "text/html", is not "text/css". www.website.com
Loading module from “https://www.website.com/_build/assets/client-BYgT4Rjn.js” was blocked because of a disallowed MIME type (“text/html”).
The stylesheet https://www.website.com/_build/assets/client-DlFybg74.css was not loaded because its MIME type, "text/html", is not "text/css". www.website.com
Loading module from “https://www.website.com/_build/assets/client-BYgT4Rjn.js” was blocked because of a disallowed MIME type (“text/html”).
I'm using routes/work/slug.tsx: 
const getWorkItem = query(async (slug: string) => {
  'use server'
  const { data, error } = await fetchSanityWork(slug)

  const transformedData = {
    ...data,
    challenge: {
      ...data?.challenge,
      title: 'Challenge',
    },
    approach: {
      ...data?.approach,
      title: 'Approach',
    },
    solution: {
      ...data?.solution,
      title: 'Solution',
    },
  }
  if (error) throw new Error(`Failed to fetch work item: ${error}`)
  return transformedData
}, 'work-item')

export default function Work() {
  const data = createAsync(() => getWorkItem(props.params.slug))
  return (
     // ...
  )
}
const getWorkItem = query(async (slug: string) => {
  'use server'
  const { data, error } = await fetchSanityWork(slug)

  const transformedData = {
    ...data,
    challenge: {
      ...data?.challenge,
      title: 'Challenge',
    },
    approach: {
      ...data?.approach,
      title: 'Approach',
    },
    solution: {
      ...data?.solution,
      title: 'Solution',
    },
  }
  if (error) throw new Error(`Failed to fetch work item: ${error}`)
  return transformedData
}, 'work-item')

export default function Work() {
  const data = createAsync(() => getWorkItem(props.params.slug))
  return (
     // ...
  )
}
Not sure if I'm doing anything wrong or I'm missing something? Also, I did try setting the preset in app.config.ts to preset: 'static' and static: true worked nicely, but when it came to route navigation it would give me an error when visiting the page on route navigation. If i was to load the page directly, it would render fine. P.S. Deploying to vercel can be extremely tricky too... any help will be appreciated 🙏 Thanks in advance!
2 Replies
Maciek50322
Maciek50322•3w ago
Seems like deployment issue and error looks similar to these, check if any of answers help you https://stackoverflow.com/questions/2190459/the-stylesheet-was-not-loaded-because-its-mime-type-text-html-is-not-text-c https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type/55100708
Stack Overflow
"The stylesheet was not loaded because its MIME type, "text/html" i...
I have a javascript application and when I run it on firefox I am getting the following erro on the console: "The stylesheet was not loaded because its MIME type, "text/html" is not "text/css".
Stack Overflow
Stylesheet not loaded because of MIME type
I'm working on a website that uses Gulp.js to compile and browser sync to keep the browser synchronised with my changes. The Gulp.js task compiles everything properly, but on the website, I'm unabl...
Aaron
AaronOP•3w ago
Yeah its definitely a deployment issue, i solved it in the end. Thank you! I was getting a weird blank page, plus what i thought was failing was client route navigation. I am using Sanity and i forgot to allow CORS for both local and prod. Here was my setup, incase anyone is curious for pure SSG: 
export default defineConfig({
  ssr: false,
  server: {
    preset: 'vercel',
    static: true,
    prerender: { crawlLinks: true },
    compressPublicAssets: false,
  },
})
export default defineConfig({
  ssr: false,
  server: {
    preset: 'vercel',
    static: true,
    prerender: { crawlLinks: true },
    compressPublicAssets: false,
  },
})
A vercel gotcha which I ran into was we needed compressPublicAssets: false otherwise you would run into issues with filenames.

Did you find this page helpful?