Breaks when using with Astro V2

[bramsmulders]

While upgrading to Astro V2 I encountered the following issue:

09:43:53 [astro] Unable to load astro.config.ts

 error   __vite_ssr_import_2__.default is not a function
  File:
    /node_modules/vite/dist/node/chunks/dep-5e7f419b.js:52224:9
  Code:
    52223 |         const initModule = new AsyncFunction(`global`, ssrModuleExportsKey, ssrImportMetaKey, ssrImportKey, ssrDynamicImportKey, ssrExportAllKey, '"use strict";' + result.code + `\n//# sourceURL=${mod.url}`);
    > 52224 |         await initModule(context.global, ssrModule, ssrImportMeta, ssrImport, ssrDynamicImport, ssrExportAll);
            |         ^
      52225 |     }
      52226 |     catch (e) {
      52227 |         mod.ssrError = e;
  Stacktrace:
TypeError: __vite_ssr_import_2__.default is not a function
    at eval (/astro.config.ts:17:34)
    at async instantiateModule (file:///node_modules/vite/dist/node/chunks/dep-5e7f419b.js:52224:9)

while I disable the astro-sanity config Astro can read the astro.config.ts file just fine.

[bramsmulders]

Seems that downgrading to astro-sanity v1.0.0 also fixes it, so it seems your work on v1.1.2 is not compatible with Astro V2.

[jaydanurwin]

I'm not currently experiencing any issues using Astro 2.0.4 on both the static and SSR demos. Can you please provide more info about your environment? (where it's deployed, are you using SSR, static, etc)

Thank you!

[jaydanurwin]

I'm going to close this issue but please feel to reach out here or in our Discord if you still are having issues. Thanks!

[kkga]

I've noticed the same error when using import.meta.env in the configuration options for sanity({...}). It works if I use arbitrary values, but not when trying to pull the values from environment.

[jaydanurwin]

From what I know about Vite config files and Astro config files you can't use import.meta.env in the config because the meta environment is running in the source code and not config file. I could be wrong about that though. I can add some documentation around using .env files in the config file if that might help?

[kkga]

I'm not sure why, but it actually works if I use the sanity client package directly and not the integration:

import sanityClient from "@sanity/client";
import imageUrlBuilder from "@sanity/image-url";
import { portableTextToHtml } from "astro-sanity";

const config = {
  projectId: import.meta.env.SANITY_PROJECT_ID,
  dataset: import.meta.env.SANITY_DATASET,
  apiVersion: import.meta.env.SANITY_API_VERSION,
  useCdn: true,
};

const client = sanityClient(config);
const builder = imageUrlBuilder(client);

[jaydanurwin]

@kkga Are you putting this code in your src folder or your astro.config.mjs file? It shouldn't work in the config file because import.meta.env doesn't work there at all to my knowledge.

[kkga]

You're right, it's in the src/, not in the astro config.

[bramsmulders]

Sorry for the late response, but it seems to work now. I've cleared my node_modules and ran yarn again and it worked with the latest version 👍🏼.

One thing though: I'm using typescript in my Astro project, and naturally I have astro.config.ts instead of .mjs. I'm getting the following TypeScript warning when declaring the astro-sanity integration:

Type 'AstroIntegration' is not assignable to type 'false | AstroIntegration | (false | AstroIntegration)[]'.
  Type 'import("/Users/REDACTED_PATH/node_modules/astro-sanity/node_modules/astro/dist/@types/astro").AstroIntegration' is not assignable to type 'import("/Users/REDACTED_PATH/node_modules/astro/dist/@types/astro").AstroIntegration'.
    The types of 'hooks['astro:config:setup']' are incompatible between these types.
      Type '(options: { config: import("/Users/REDACTED_PATH/node_modules/astro-sanity/node_modules/astro/dist/@types/astro").AstroConfig; command: "dev" | "build" | "preview"; ... 5 more ...; injectRoute: (injectRoute: import("/Users/REDACTED_PATH/node_modules/astro-sanit...' is not assignable to type '(options: { config: import("/Users/REDACTED_PATH/node_modules/astro/dist/@types/astro").AstroConfig; command: "dev" | "build" | "preview"; isRestart: boolean; ... 4 more ...; injectRoute: (injectRoute: import("/Users/REDACTED_PATH/node_modules/astro/dist/@types...'.
        Types of parameters 'options' and 'options' are incompatible.
          Type '{ config: import("/Users/REDACTED_PATH/node_modules/astro/dist/@types/astro").AstroConfig; command: "dev" | "build" | "preview"; isRestart: boolean; ... 4 more ...; injectRoute: (injectRoute: import("/Users/REDACTED_PATH/node_modules/astro/dist/@types/astro").I...' is not assignable to type '{ config: import("/Users/REDACTED_PATH/node_modules/astro-sanity/node_modules/astro/dist/@types/astro").AstroConfig; command: "dev" | "build" | "preview"; ... 5 more ...; injectRoute: (injectRoute: import("/Users/REDACTED_PATH/node_modules/astro-sanity/node_mod...'.
            Types of property 'config' are incompatible.
              Property 'style' is missing in type 'import("/Users/REDACTED_PATH/node_modules/astro/dist/@types/astro").AstroConfig' but required in type 'import("/Users/REDACTED_PATH/node_modules/astro-sanity/node_modules/astro/dist/@types/astro").AstroConfig'.ts(2322)
schema.d.ts(201, 5): 'style' is declared here.

My configuration looks like this:

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
import sanity from 'astro-sanity';
import compress from 'astro-compress';

export default defineConfig({
    site: 'REDACTED',
    integrations: [
        sitemap(),
        sanity({
            projectId: 'REDACTED',
            dataset: 'production',
            apiVersion: '2022-03-23',
            useCdn: false,
        }),
        compress(),
    ],
});

The Error occurs only in VSCode when hovering over the squiggly lines, while building or developing it works flawlessly.