JakiChen commented 1 year ago

[Please fix the bug as soon as possible]： error `__vite_ssr_import_2__.useSanityClient` is not a function

astro: v3.2.0
@sanity/astro: v2.0.0

astro.config.mjs

import { defineConfig } from "astro/config";
import { projectId, dataset, siteUrl, viteConfig, config } from "./config";
//

import sanity from "@sanity/astro";

// https://astro.build/config
export default defineConfig({
  site: siteUrl,
  outDir: "build",
  build: {
    assets: "assets",
    assetsPrefix: siteUrl,
    inlineStylesheets: "never",
  },
  compressHTML: import.meta.env.PROD,
  //
  ...(await import("./config/ssr/vercel/hybrid")).default,
  //
  vite: viteConfig,
  //
  integrations: [
    sanity({
      projectId: projectId,
      dataset: dataset,
      /*  Set to date of setup to use the latest API version */
      apiVersion: "2023-02-08",
      /* Set useCdn to `false` if you're building statically. */
      useCdn: true,
      /* Access the Studio on `your.url/admin` */
      // studioBasePath: "/admin",
    }),
  ],
});

config/index.js

import { defineConfig, loadEnv } from "vite";

const env = loadEnv(defineConfig.mode, process.cwd(), "");
const {
  PUBLIC_SANITY_STUDIO_PROJECT_ID,
  PUBLIC_SANITY_STUDIO_DATASET,
  PUBLIC_SANITY_PROJECT_ID,
  PUBLIC_SANITY_DATASET,
  PROD_SITE_URL,
  DEV_SITE_URL
} = loadEnv(env.NODE_ENV, process.cwd(), "");

export const projectId = PUBLIC_SANITY_STUDIO_PROJECT_ID || PUBLIC_SANITY_PROJECT_ID;
export const dataset = PUBLIC_SANITY_STUDIO_DATASET || PUBLIC_SANITY_DATASET;
export const siteUrl = PROD_SITE_URL || DEV_SITE_URL;

export { default as config } from "./integrations";
export { default as viteConfig } from "./vite.config";

sr/pages/post/index.astro

---
import { useSanityClient } from "@sanity/astro";

const posts = await useSanityClient().fetch(`*[_type == "post"]`);
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My blog</title>
  </head>
  <body>
    <h1>My blog</h1>
    {
      posts && (
        <ul>
          {posts.map((post) => (
            <li>
              <a href={`post/${post.slug?.current}`}>{post.title}</a>
            </li>
          ))}
        </ul>
      )
    }
  </body>
</html>

JakiChen commented 1 year ago

[Please fix the bug as soon as possible]： error __vite_ssr_import_2__.useSanityClient is not a function

astro: v3.2.0

@sanity/astro: v2.0.0

This bug currently only exists in `astro@^3.2.0` version, and everything is normal in v3.0.0~v3.1.1.

kbario commented 1 year ago

the new API doesn't export a function any more (see here). Remove the brackets, and it should work.

- useSanityClient().fetch(...)
+ sanityClient.fetch(...)

JakiChen commented 1 year ago

the new API doesn't export a function any more (see here). Remove the brackets, and it should work.
- useSanityClient().fetch(...)
+ sanityClient.fetch(...)

Thank you，

I already know that there are too many dependent libraries that need to be installed (too unfriendly for a user who does not want to develop the Sanity server). In addition, even if the official reference case is installed, there is still an inexplicable error when loading the detailed page. Its seconds wrong.

As a friendly official plug-in, it should be as efficient and simple as possible. It may be deprecated, it may be best to use the original TS method, or it may seek more friendly headless CMS integration support.

kmelve commented 1 year ago

Sorry for the inconvenience! We're working on a fix for this. It should be out this week.

@JakiChen: To your points about “too many dependent libraries” vs. “efficient and simple as possible.” This integration installs the necessary dependencies to easily mount Sanity Studio on a route. This is not the “Sanity server,” but the content editing interface you will have to set up and configure if you're using Sanity, not just for the content store. The dependencies won't be part of your production build unless you use this function, and if you do, only for the given route.

If keeping as few dependencies as possible is important to you, then I suggest installing @sanity/client or picosanity, or just fetch against the HTTP endpoint directly!

salv0 commented 1 year ago

Any news about this?

still having the issue with:

"@sanity/astro": "^2.1.4",
"@sanity/client": "^6.8.0",
 "astro": "^3.5.2",
"sanity": "3.19.2",

bursteways commented 9 months ago

Any news about this?

still having the issue with:
"@sanity/astro": "^2.1.4",
"@sanity/client": "^6.8.0",
 "astro": "^3.5.2",
"sanity": "3.19.2",

You can use like this instead:

import { sanityClient } from "sanity:client";

kmelve commented 8 months ago

Should be solved in #149 – thanks for reporting! (Astro requires a default export for npx astro add installation)

sanity-io / sanity-astro