Getting ReferenceError: process is not defined when attempting to import Schema into Astro React component

[nadetastic]

Environment information

System:
  OS: macOS 14.4.1
  CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Memory: 75.01 MB / 16.00 GB
  Shell: /bin/zsh
Binaries:
  Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
  Yarn: undefined - undefined
  npm: 10.2.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
  pnpm: 8.12.1 - /usr/local/bin/pnpm
NPM Packages:
  @aws-amplify/auth-construct: 1.2.0
  @aws-amplify/backend: 1.0.4
  @aws-amplify/backend-auth: 1.1.1
  @aws-amplify/backend-cli: 1.2.2
  @aws-amplify/backend-data: 1.1.0
  @aws-amplify/backend-deployer: 1.0.3
  @aws-amplify/backend-function: 1.3.0
  @aws-amplify/backend-output-schemas: 1.1.0
  @aws-amplify/backend-output-storage: 1.0.2
  @aws-amplify/backend-secret: 1.0.0
  @aws-amplify/backend-storage: 1.0.4
  @aws-amplify/cli-core: 1.1.1
  @aws-amplify/client-config: 1.1.2
  @aws-amplify/deployed-backend-client: 1.2.0
  @aws-amplify/form-generator: 1.0.0
  @aws-amplify/model-generator: 1.0.3
  @aws-amplify/platform-core: 1.0.4
  @aws-amplify/plugin-types: 1.1.0
  @aws-amplify/sandbox: 1.1.1
  @aws-amplify/schema-generator: 1.2.0
  aws-amplify: 6.5.0
  aws-cdk: 2.151.0
  aws-cdk-lib: 2.151.0
  typescript: 5.5.4
AWS environment variables:
  AWS_STS_REGIONAL_ENDPOINTS = regional
  AWS_NODEJS_CONNECTION_REUSE_ENABLED = 1
  AWS_SDK_LOAD_CONFIG = 1
No CDK environment variables

Description

I'm trying out Astro with Amplify Gen2 and came across an error when attempting to import the Schema from defineData into a React component in Astro

Here are my components

todo/[...slug].astro

---
import { amplifyDataClient } from "@/components/react/ConfigureAmplifyClientSide";
import { TodoCard } from "@/components/react/TodoCard";
import type { Schema } from "amplify/data/resource"; // <-- this doesn't throw an error

export async function getStaticPaths() {
  const { data } = await amplifyDataClient.models.Todo.list();
  return data.map((todo) => ({
    params: { slug: todo.id },
    props: todo,
  }));
}

type Props = Schema["Todo"]["type"];
const todo = Astro.props;
---

<TodoCard todo={todo} client:load />

TodoCard.tsx

import { type Schema } from "amplify/data/resource"; // <-- This throws an error by simply importing it
type Todo = Schema["Todo"]["type"];

export const TodoCard = ({ todo }: { todo: Todo }) => {

  return JSON.stringify(todo);
}

With this I get the following error in the browser console

[nadetastic]

Just solved this I think, the issue seems to be the syntax

import { type Schema } from "amplify/data/resource"; // <-- Throws an error
import type { Schema } from "amplify/data/resource"; // <-- Works 

Not sure if its something specific to astro, as I haven't had this issue before and Im relatively new to astro

[ykethan]

Hey,👋 thanks for raising this! I'm going to transfer this over to our API repository for better assistance 🙂

[nadetastic]

Adding tsconfig

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

[josefaidt]

Import declarations written with import type, export declarations written with export type { ... }, and import or export specifiers prefixed with the type keyword are all guaranteed to be elided from the output JavaScript.
https://www.typescriptlang.org/docs/handbook/modules/reference.html#type-only-imports-and-exports

While I'm not able to reproduce this in a .astro file I have not yet attempted to import in a React component, therefore this may be due to how those components are transpiled and passed to the bundler.

That being said this should be removed when verbatimModuleSyntax is set to true, as specified by Astro's base tsconfig

@nadetastic does this occur with import { type... in Astro components themselves?

[nadetastic]

@josefaidt Nope that doesn't throw an error - seems specific to react components, haven't tried Vue/others

[chrisbonifacio]

Going to mark this as a bug for now since it's consistently reproducible. I couldn't find any existing bugs in the Astro repo or elsewhere. Seems unique to react components in Astro at the moment.

But, while it's a runtime issue, it doesn't seem to be related to data-schema. So, i'm going to transfer this to the JS repo.

[cwomack]

Closing this issue as it's not Amplify related, but rather on the Astro side of things. We'll monitor Astro repo for a related bug and cross link.