Vite SSR issue 1.x

[chemeng]

Hey, thank you for the package, works great!

One question I have is regarding this line: https://github.com/vueuse/schema-org/blob/main/packages/schema-org/createSchemaOrg/index.ts#L136

This data-ssr: false shows up in the final output and some validators give out a warning. Is there a reason to have it?

[harlan-zw]

Hey @chemeng

Thanks for flagging this! this should only be in development for debugging purposes, I'll look to get this fixed in the next few days.

[chemeng]

awesome, let me know when it's cleaned up :)

[harlan-zw]

Hey @chemeng

This is sorted in v1, please upgrade to resolve this issue :)

[chemeng]

Hi @harlan-zw thank you. After upgrading, everything broke for me and now I'm trying to migrate to v1 following the documentation but I think there is a mistake in the docs.

for manual imports it says import { defineWebPage } from '#vueuse/schema-org/provider' but it doesn't work for me in javascript.

[harlan-zw]

Hey @chemeng

I'm guessing you're using Vite?

Make sure you have the plugin installed and you have the dts option on, it will write that alias for you.

import { SchemaOrg } from '@vueuse/schema-org-vite'

export default defineConfig({
  plugins: [
   // ...
    SchemaOrg({
      // use simple types
      full: false,
      // write type alias to tsconfig.json
      dts: true,
    }),
  ],
  // ..
})

You can alternatively try importing from @vueuse/schema-org/runtime and see if that helps.

If you have other issues let me know, happy to work with you on getting it up and running

[chemeng]

@harlan-zw Yeah I'm using Vite with SSR.

I did the import from "@vueuse/schema-org/simple"; which worked. However now I'm getting this:

Error: [@vueuse/schema-org] Failed to find plugin, you may have forgotten to apply app.use(schemaOrg). I have this in my createApp wrapper function:

installSchemaOrg(
    { app },
    {
      /* config */
      defaultLanguage: lang,
      canonicalHost: 'https://example.com',
    }
  );

In the docs it looks like app.use is not needed anymore.

[harlan-zw]

Can I have some details about your project or a reproduction repo?

I have attempted to replicate issues using Vite SSR and it seems to be working correctly https://stackblitz.com/edit/vitejs-vite-vsf3sy

Using the alias is preferred as it should avoid this warning. Does any schema generate at all even with it?

[chemeng]

hey @harlan-zw it's a bit tricky to generate a standalone repro (it's a big app) but I'll work on this the next few days and get back to you

[harlan-zw]

No worries @chemeng as a quick solution you can try out the latest version 1.0.3-beta.4 and see if you have any luck

Note, in this version you should import as import { } from '@vueuse/schema-org/runtime for manual imports, also you should manually specify mock to be false as a starting point.

I'll have proper release docs once it's fully tested

vite.config.ts

 SchemaOrg({
      // use simple types
      full: false,
      // write type alias to tsconfig.json
      dts: true,
      // enable mocking in production
      mock: false
    }),

[harlan-zw]

Hey @chemeng

With the v2 release, your issue should be hopefully solved once and for all. If you have any issues with the migration let me know.

[chemeng]

@harlan-zw I think we now have a different problem. Somehow the schema is rendered in the body and not the head element. Shouldn't the position be returned in this?

https://github.com/harlan-zw/unhead-schema-org/blob/3a723894cf11befba8efe9b90486784ccaa96f74/packages/unhead-schema-org/src/core/resolve.ts#L35

[harlan-zw]

Thanks for flagging that @chemeng, I've pushed up a fix in 2.0.1.

The tag in the body is the recommended approach though just FYI

[chemeng]

yeah, I left it there, just thought I'd point it out in case anyone really needed the head option