Unable to resolve "@aws-amplify/backend" from "amplify/data/resource.ts"

[ChristopherGabba]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React Native

Amplify APIs

Authentication, GraphQL API, DataStore

Amplify Version

v6

Amplify Categories

auth, storage, hosting

Backend

Amplify Gen 2 (Preview)

Environment information

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 628.19 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.7.0 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.1.0 - /opt/homebrew/bin/npm
    Watchman: 2023.09.04.00 - /opt/homebrew/bin/watchman
  Browsers:
    Safari: 17.4.1
  npmPackages:
    %name%:  0.1.0 
    @aws-amplify/backend: ^1.0.1 => 1.0.1 
    @aws-amplify/backend-cli: ^1.0.2 => 1.0.2 
    @aws-amplify/react-native: ^1.1.0 => 1.1.0 
    @babel/core: ^7.20.0 => 7.24.5 
    @babel/plugin-proposal-export-namespace-from: ^7.18.9 => 7.18.9 
    @babel/plugin-proposal-optional-chaining: ^7.0.0 => 7.21.0 
    @babel/plugin-transform-arrow-functions: ^7.0.0 => 7.24.1 
    @babel/plugin-transform-nullish-coalescing-operator: ^7.0.0 => 7.24.1 
    @babel/plugin-transform-shorthand-properties: ^7.0.0 => 7.24.1 
    @babel/plugin-transform-template-literals: ^7.0.0 => 7.24.1 
    @babel/preset-env: ^7.20.0 => 7.24.5 
    @babel/runtime: ^7.20.0 => 7.24.5 
    @config-plugins/ffmpeg-kit-react-native: ^8.0.0 => 8.0.0 
    @expo-google-fonts/m-plus-1p: ^0.2.3 => 0.2.3 
    @expo-google-fonts/montserrat: ^0.2.3 => 0.2.3 
    @expo/config-plugins: ~8.0.0 => 8.0.4 (7.9.2)
    @expo/metro-runtime: ~3.1.3 => 3.1.3 
    @gorhom/bottom-sheet: ^4.6.1 => 4.6.1 
    @react-native-async-storage/async-storage: ^1.23.1 => 1.23.1 
    @react-native-community/netinfo: ^11.3.1 => 11.3.1 
    @react-navigation/bottom-tabs: ^6.5.20 => 6.5.20 
    @react-navigation/native: ^6.0.2 => 6.1.17 
    @react-navigation/native-stack: ^6.0.2 => 6.9.26 
    @sentry/react-native: ~5.22.0 => 5.22.2 
    @shopify/flash-list: 1.6.4 => 1.6.4 
    @types/i18n-js: 3.8.2 => 3.8.2 
    @types/jest: ^29.2.1 => 29.5.12 
    @types/react: ~18.2.14 => 18.2.79 (18.3.1)
    @types/react-test-renderer: ^18.0.0 => 18.3.0 
    @typescript-eslint/eslint-plugin: ^5.59.0 => 5.62.0 
    @typescript-eslint/parser: ^5.59.0 => 5.62.0 
    ContextAPIMixpanel:  0.0.1 
    HelloWorld:  0.0.1 
    MixpanelDemo:  0.0.1 
    SimpleMixpanel:  0.0.1 
    apisauce: 3.0.1 => 3.0.1 
    aws-amplify: ^6.3.0 => 6.3.0 
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    aws-cdk: ^2.141.0 => 2.141.0 
    aws-cdk-lib: ^2.141.0 => 2.141.0 
    babel-jest: ^29.2.1 => 29.7.0 
    constructs: ^10.3.0 => 10.3.0 
    date-fns: ^2.30.0 => 2.30.0 
    esbuild: ^0.21.1 => 0.21.1 (0.20.2)
    eslint: 8.17.0 => 8.17.0 
    eslint-config-prettier: 8.5.0 => 8.5.0 
    eslint-config-standard: 17.0.0 => 17.0.0 
    eslint-plugin-import: 2.26.0 => 2.26.0 
    eslint-plugin-n: ^15.0.0 => 15.7.0 
    eslint-plugin-promise: 6.0.0 => 6.0.0 
    eslint-plugin-react: 7.30.0 => 7.30.0 
    eslint-plugin-react-native: 4.0.0 => 4.0.0 
    eslint-plugin-reactotron: ^0.1.2 => 0.1.4 
    expo: ^51.0.0 => 51.0.2 
    expo-application: ~5.9.1 => 5.9.1 
    expo-av: ~14.0.4 => 14.0.4 
    expo-blur: ~13.0.2 => 13.0.2 
    expo-build-properties: ~0.12.1 => 0.12.1 
    expo-clipboard: ~6.0.3 => 6.0.3 
    expo-constants: ^16.0.1 => 16.0.1 
    expo-contacts: ~13.0.3 => 13.0.3 
    expo-dev-client: ~4.0.13 => 4.0.13 
    expo-device: ~6.0.2 => 6.0.2 
    expo-font: ~12.0.4 => 12.0.4 
    expo-haptics: ~13.0.1 => 13.0.1 
    expo-image-picker: ~15.0.4 => 15.0.4 
    expo-linear-gradient: ~13.0.2 => 13.0.2 
    expo-linking: ~6.3.1 => 6.3.1 
    expo-localization: ~15.0.3 => 15.0.3 
    expo-modules-autolinking: ^1.11.1 => 1.11.1 
    expo-notifications: ~0.28.1 => 0.28.1 
    expo-secure-store: ~13.0.1 => 13.0.1 
    expo-share-intent: ^2.0.0 => 2.0.0 
    expo-splash-screen: ~0.27.4 => 0.27.4 
    expo-status-bar: ~1.12.1 => 1.12.1 
    expo-store-review: ~7.0.2 => 7.0.2 
    expo-updates: ~0.25.11 => 0.25.11 
    expo-video-thumbnails: ~8.0.0 => 8.0.0 
    ffmpeg-kit-react-native: ^6.0.2 => 6.0.2 
    i18n-js: 3.9.2 => 3.9.2 
    jest: ^29.2.1 => 29.7.0 
    jest-expo: ~51.0.1 => 51.0.1 
    libphonenumber-js: ^1.11.1 => 1.11.1 (1.9.47)
    libphonenumber-js-core:  undefined (1.0.0)
    libphonenumber-js-max:  undefined (1.0.0)
    libphonenumber-js-min:  undefined (1.0.0)
    libphonenumber-js-mobile:  undefined (1.0.0)
    libphonenumber-js/build:  undefined ()
    libphonenumber-js/core:  undefined ()
    libphonenumber-js/max:  undefined ()
    libphonenumber-js/max/metadata:  undefined ()
    libphonenumber-js/min:  undefined ()
    libphonenumber-js/min/metadata:  undefined ()
    libphonenumber-js/mobile:  undefined ()
    libphonenumber-js/mobile/examples:  undefined ()
    libphonenumber-js/mobile/metadata:  undefined ()
    lodash: ^4.17.21 => 4.17.21 
    lodash.filter: ^4.6.0 => 4.6.0 
    lottie-react-native: 6.7.0 => 6.7.0 
    mixpanel-react-native: ^3.0.2 => 3.0.2 
    mixpanelexpo:  1.0.0 
    mobx: 6.10.2 => 6.10.2 
    mobx-react-lite: 4.0.5 => 4.0.5 
    mobx-state-tree: 5.3.0 => 5.3.0 
    patch-package: 6.4.7 => 6.4.7 
    postinstall-prepare: 1.0.1 => 1.0.1 
    prettier: 2.8.8 => 2.8.8 (2.3.2, 1.19.1)
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    react-native: 0.74.1 => 0.74.1 
    react-native-blurhash: ^2.0.2 => 2.0.2 
    react-native-compressor: ^1.8.24 => 1.8.24 
    react-native-context-menu-view: ^1.16.0 => 1.16.0 
    react-native-device-info: ^10.13.2 => 10.13.2 
    react-native-fs: ^2.20.0 => 2.20.0 
    react-native-gesture-handler: ~2.16.1 => 2.16.2 
    react-native-get-random-values: ^1.11.0 => 1.11.0 
    react-native-mmkv: ^2.12.2 => 2.12.2 
    react-native-reanimated: ~3.10.1 => 3.10.1 
    react-native-safe-area-context: ^4.10.1 => 4.10.1 
    react-native-screens: 3.31.1 => 3.31.1 
    react-native-static-safe-area-insets: ^2.2.0 => 2.2.0 
    react-native-touchable-scale: ^2.2.0 => 2.2.0 
    react-native-url-polyfill: ^2.0.0 => 2.0.0 
    react-native-vision-camera: ^4.0.3 => 4.0.3 
    react-native-volume-manager: ^1.10.0 => 1.10.0 
    react-native-web: ~0.19.6 => 0.19.11 
    react-native-webview: 13.8.6 => 13.8.6 
    react-native-youtube-iframe: ^2.3.0 => 2.3.0 
    react-test-renderer: 18.2.0 => 18.2.0 
    reactotron-core-client: ^2.8.13 => 2.9.3 
    reactotron-mst: ^3.1.7 => 3.1.9 
    reactotron-react-js: ^3.3.11 => 3.3.14 
    reactotron-react-native: ^5.0.5 => 5.1.6 
    ts-jest: ^29.1.1 => 29.1.2 
    ts-node: ^10.9.2 => 10.9.2 
    tsx: ^4.9.4 => 4.9.4 
    typescript: ^5.4.5 => 5.4.5 (4.4.4, 4.9.5)
    uuid: ^9.0.1 => 9.0.1 (8.3.2, 3.3.2, 7.0.3)
  npmGlobalPackages:
    @aws-amplify/cli-internal: 12.12.0
    @aws-amplify/cli: 12.11.0
    @react-native-community/netinfo: 9.4.1
    eas-cli: 9.0.2
    expo-cli: 6.3.10
    firebase-tools: 11.24.1
    n: 9.1.0
    node-gyp: 10.0.1
    node: 20.6.0
    npm: 10.7.0
    pod-install: 0.2.0
    react-native-spinkit: 1.5.1
    reel-feel: 0.0.1
    typescript: 5.4.5
    yarn: 1.22.22

Describe the bug

I am trying to run an amplify gen 2 backend for my react-native-expo (managed workflow) app and I cannot get app to compile.

I keep getting the error:

Expected behavior

I should be able to get the app to compile but it isn't.

Reproduction steps

1. Create an expo app in react native
2. Set up a Gen2 backend following the docs steps
3. Create a development build and then try to use it in a development build.

Code Snippet

import { defineAuth } from "@aws-amplify/backend"

/**
 * Define and configure your auth resource
 * @see https://docs.amplify.aws/gen2/build-a-backend/auth
 */
export const auth = defineAuth({
  loginWith: {
    phone: true,
  },
  accountRecovery: "PHONE_ONLY_WITHOUT_MFA",
  groups: ["AUTHENTICATED", "UNAUTHENTICATED"],
  userAttributes: {
    birthdate: {
      mutable: true,
      required: true,
    },
    givenName: {
      mutable: true,
      required: true,
    },
    familyName: {
      mutable: true,
      required: true,
    },
    preferredUsername: {
      mutable: true,
      required: true,
    },
    profilePicture: {
      mutable: true,
      required: true,
    },
  },
})

File Structure:

Log output

// Put your logs below this line

aws-exports.js

Here is my amplify_outputs.json

{
  "auth": {
    "user_pool_id": "us-east-1_92ffz4ZUK",
    "aws_region": "us-east-1",
    "user_pool_client_id": "rj4g3r9f3acjgmepf29os1ip",
    "identity_pool_id": *REDACTED*,
    "standard_required_attributes": [
      "phone_number",
      "birthdate",
      "given_name",
      "family_name",
      "preferred_username",
      "picture"
    ],
    "username_attributes": [
      "phone_number"
    ],
    "user_verification_types": [
      "phone_number"
    ],
    "password_policy": {
      "min_length": 8,
      "require_numbers": true,
      "require_lowercase": true,
      "require_uppercase": true,
      "require_symbols": true
    },
    "unauthenticated_identities_enabled": true
  },
  "storage": {
    "aws_region": "us-east-1",
    "bucket_name": "amplify-reelfeel-christop-reelfeelmediabucketee458-eqap2lxy9eir"
  },
  "version": "1"
}

Manual configuration

No response

Additional configuration

No response

Mobile Device

iPhone 12 Physical

Mobile Operating System

iOS 17.2.1

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[ChristopherGabba]

I have tried clearing all caches, clearing package lock, tried yarn, installing the @aws-amplify/backend directly etc. Nothing can get this package to show up.

[cwomack]

Hello again, @ChristopherGabba 👋. I'm going to send this one over to the amplify-backend repo for better assistance on the Gen 2 side.

[edwardfoyle]

Hi @ChristopherGabba, this looks like the @aws-amplify/backend package is being pulled into your frontend build. This package, or any code that depends on it, should not be used anywhere in frontend code. Can you confirm that you are only using this package within the amplify backend directory?

[ChristopherGabba]

Hey @edwardfoyle! You are Maxs old roommate right?? I've known Max since I was like 4 and grew up with him. Small world... He says you are a demon on a bicycle.

Anyway, hope you are doing well. I am only seeing it when I search for "@aws-amplify/backend" it only shows up:

In package.json and yarn.lock and then the backend config. Note I have package-lock.json and yarn-lock.json because I was trying npm vs. yarn. That's not typical.

[edwardfoyle]

Yes I am! Small world indeed :)

Are you importing anything from amplify/data/resource.ts in your frontend? If you are importing the schema type, make sure that you are importing using

import type { Schema } from '../amplify/data/resource'

instead of

import { Schema } from '../amplify/data/resource'

This ensures that the Schema type import is erased from the transpiled js

[ChristopherGabba]

@edwardfoyle that's awesome. If your going to be at his wedding, we will meet there!

Anyway, yes I placed quite a bit of types that I made in the resource.ts folder and am using them throughout the app. Is there a good way for me to be able to reference my Amplify Gen 2 model enums or should I make a copy of them elsewhere?

For instance I have a:

MediaType: a.enum(["Video", "Image"])

And I made a copy right above it:

enum MediaType {
...
}

And I'm referencing it throughout my app. Is there a way to reference your enums through the Schema type?

Also do I even need to have that @aws-amplify/backend package in my app?

I think you may be spot on, I'll go through and clean it up and let you know if it fixes it!

[ChristopherGabba]

@edwardfoyle Okay, you were spot on, I had two files where I imported Schema without the type prefix. I think it may be good to emphasize the important of this in the docs as I think this auto imported when typing Schema in my app.

[ChristopherGabba]

I was able to eliminate this error by fixing my imports throughout my app, thank you @edwardfoyle! I do recommend placing some sort of emphasis on the importance of this in the docs as these did get autoimported this way while typing generateClient<Schema>() in my app via Vscode and I had to go up and correct each one.

[edwardfoyle]

Yeah this is a good call. Definitely an easy thing to miss. I'll bring it up with the product team.