__vite_ssr_import_5__.client.listen is not a function

[quiet mango]

Getting this on a React component (screenshot includes all but imports)
Also, using Sanity's JS client in the screenshot (https://www.sanity.io/docs/js-client)

[rough spindle]

Hello! I'm sure some people could help if they see the entire file content and/or the stacktrace

[quiet mango]

Oh yes I forgot the stacktrace 😛

Stacktrace:

TypeError: __vite_ssr_import_5__.client.listen is not a function
    at PreviewTest (/src/pages/blog/preview.jsx:22:32)
    at renderWithHooks (/Users/joao/projects/mz-astro-site/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent (/Users/joao/projects/mz-astro-site/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5797:15)
    at renderElement (/Users/joao/projects/mz-astro-site/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6012:7)
    at renderNodeDestructiveImpl (/Users/joao/projects/mz-astro-site/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
    at renderNodeDestructive (/Users/joao/projects/mz-astro-site/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
    at retryTask (/Users/joao/projects/mz-astro-site/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6594:5)
    at performWork (/Users/joao/projects/mz-astro-site/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6642:7)
    at Immediate._onImmediate (/Users/joao/projects/mz-astro-site/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6969:12)
    at process.processImmediate (node:internal/timers:471:21)

Complete jsx file:

import { atom } from 'nanostores';
import { useStore } from '@nanostores/react';
import { getAllPosts, getSpecificPost } from '@utils/queries';
import { useEffect } from 'react';
import { client } from './preview-client';

// eslint-disable-next-line react-hooks/rules-of-hooks
export const post = atom(null);

export const PreviewTest = () => {
  const $post = useStore(post);

  console.log('preview mode');
  client.listen(getSpecificPost('blog-post-mz-stuff'), { includeResult: true })
    .subscribe(update => {
      console.log('update: ', update.result.title);
      $post.set(update.result);
    });
  console.log('result: ', post.get());

  return $post ? <h1>{ $post.title }</h1> : null;
};

export default PreviewTest;

[rough spindle]

Looks like the client wasn't instantiated, mind sharing the content of preview-client?

[quiet mango]

sure, i did "comment" some stuff out (heh)
planning on using env vars... tomorrow!

import sanity from "astro-sanity";

const projectId = "id here";
const dataset = "dev";

// eslint-disable-next-line import/prefer-default-export
export const client = sanity({
  projectId,
  dataset,
  apiVersion: "2021-10-21",
  token:
    "ure not getting this one!",
});

[rough spindle]

Ah

astro-sanity is a community integration, not the same usage as the official sanity docs
https://github.com/littlesticks/astro-sanity

You'll find there the docs to use that lib

[quiet mango]

I’m aware of that, still what I wrote should work no? It’s pretty much a separate Sanity client for previewing only

[rough spindle]

Not quite
See https://github.com/littlesticks/astro-sanity/blob/main/src/index.ts

[rough spindle]

The default export returns an astro integration

[quiet mango]

ideas? @rough spindle

import { client } from './preview-client';

export const post = atom(null);

export const PreviewTest = () => {
  const $post = useStore(post);

  console.log('preview mode');
  client.listen(getSpecificPost('blog-post-mz-stuff'), { includeResult: true })
    .subscribe(update => {
      console.log('update: ', update.result.title);
      $post.set(update.result);
    });
  console.log('result: ', post.get());

  return $post ? <h1>{ $post.title }</h1> : null;
};

export default PreviewTest;

preview-client:

import { createClient } from '@sanity/client';

const projectId = '---';
const dataset = 'dev';

// eslint-disable-next-line import/prefer-default-export
const client = createClient({
    projectId,
    dataset,
    useCdn: false, // set to `true` to fetch from edge cache
    apiVersion: '2022-01-12', // use current date (YYYY-MM-DD) to target the latest API version
    token: 'beep boop',
});

export default client;

Stacktrace:

TypeError: __vite_ssr_import_0__.createClient is not a function
    at /src/pages/blog/preview-client.js:7:15
    at async instantiateModule (file:///Users/joao/projects/mz-astro-site/node_modules/.pnpm/vite@4.0.4_sass@1.57.1/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:52224:9)

[rough spindle]

Yeah here the client would be imported like this

import client from './preview-client';

[quiet mango]

nope!

with

import client from './preview-client';

[rough spindle]

Ah jumped to conclusions too fast

[quiet mango]

dunno much about vite error codes

but this one is quite... simple english

[rough spindle]

Can you try using the default import of the sanity module? Seems like their compiled js isn't ESM (though vite should work in non-esm packages AFAIK)

import SanityClient from '@sanity/client';

[quiet mango]

holy moly

black magic, it worked

so much!