Module Import Errors in UI Library Components

AmberKrause commented 12 months ago

Before creating a new issue, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have tried disabling all browser extensions or using a different browser
[X] I have tried deleting the node_modules folder and reinstalling my dependencies
[X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Other

How is your app built?

Create React App

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

us-east-1

Please describe your bug.

When syncing recently created UI Library components from Amplify Studio, Amplify creates new files within src/ui-components that contain imports incompatible with the required packages, resulting in a "Module not found" error at compile time.

Here are the problematic imports (found in a data-bound Form component and in utils.js):

import { generateClient } from "aws-amplify/api";
import { fetchUserAttributes, signOut } from "aws-amplify/auth";
import { DataStore } from "aws-amplify/datastore";
import { Hub } from "aws-amplify/utils";

Sample error message: CannotCompile

I tried the following:

Re-installing "@aws-amplify/ui-react" and "aws-amplify"
Deleting the nodule_modules folder and running npm install
Manually installing the required packages under "@aws-amplify" (such as "@aws-amplify/api") and updating the Amplify-created components to reference these instead of aws-amplify. This appeared to work for api, auth, and datastore, but does not work for utils. This is also unsustainable because it requires the Amplify-controlled files to be modified manually after every amplify pull.
Migrating to 6.+ versions of "@aws-amplify/ui-react" and "aws-amplify". This resulted in an error that UIBuilder requires "@aws-amplify/ui-react@^4.6.0" and "aws-amplify@^5.0.2", which are the versions I was using originally.

What's the expected behaviour?

Amplify UI Library components should have consistency in dependencies on "@aws-amplify/ui-react" and "aws-amplify".

Help us reproduce the bug!

Create a new React Amplify application using React 18, aws-amplify 5, and ui-react 4.
Configure the application with a GraphQL API.
Install necessary packages using npm i @aws-amplify/ui-react aws-amplify.
Create UI Components in Amplify Studio. I have a data-bound form and some Figma components.
Pull the UI Components from Amplify and run the build script locally.

Code Snippet

Package.json

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@aws-amplify/ui-react": "^4.6.0",
    "aws-amplify": "^5.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@aws-amplify/ui-react": "^4.6.0",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "aws-amplify": "^5.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }
}

Console log output

No response

Additional information and screenshots

No response

calebpollman commented 12 months ago

Hi @AmberKrause. Can you try updating to the newest version of Amplify CLI and running amplify pull?

reesscot commented 12 months ago

Transferring to Studio team for triage of UI Builder codegen behavior

AmberKrause commented 11 months ago

Thank you for the suggestion! Updating the Amplify CLI from 12.5.0 to 12.8.2 resolved the issue! I will know next time to try this first! Thanks so much!

github-actions[bot] commented 11 months ago

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see. If you need more assistance, please open a new issue that references this one. If you wish to keep having a conversation with other community members under this issue feel free to do so.

aws-amplify / amplify-studio