React - Vite Dev breaks as soon as I import Amplify

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

Amplify APIs

Not applicable

Amplify Categories

Not applicable

Environment information

# Put output below this line

  System:
    OS: Linux 5.15 undefined
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 14.00 GB / 31.23 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 18.11.0 - ~/.nvm/versions/node/v18.11.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.11.0/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.11.0/bin/npm
  Browsers:
    Brave Browser: 106.1.44.101
  npmPackages:
    @emotion/react: ^11.10.4 => 11.10.4 
    @emotion/styled: ^11.10.4 => 11.10.4 
    @mui/icons-material: ^5.10.9 => 5.10.9 
    @mui/material: ^5.10.9 => 5.10.9 
    @types/react: ^18.0.17 => 18.0.21 
    @types/react-dom: ^18.0.6 => 18.0.6 
    @vitejs/plugin-react: ^2.1.0 => 2.1.0 
    aws-amplify: ^4.3.38 => 4.3.38 
    localforage: ^1.10.0 => 1.10.0 
    match-sorter: ^6.3.1 => 6.3.1 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    react-router-dom: ^6.4.2 => 6.4.2 
    sort-by: ^1.2.0 => 1.2.0 
    vite: ^3.1.0 => 3.1.8 
  npmGlobalPackages:
    amplify: 0.0.11
    corepack: 0.14.2
    npm: 8.19.2
    yarn: 1.22.19

Describe the bug

When I start my application with vite dev The app break as soon as I add import Amplify from 'aws-amplify'; in one of my components.

here’s the stack trace:

12:41:05 PM [vite] page reload src/main.jsx
✘ [ERROR] No matching export in "node_modules/@aws-amplify/datastore/lib-esm/types.js" for import "__modelMeta__"

    node_modules/@aws-amplify/datastore/lib-esm/sync/index.js:72:17:
      72 │ import { OpType, __modelMeta__, } from '../types';
         ╵                  ~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/@aws-amplify/datastore/lib-esm/types.js" for import "__modelMeta__"

    node_modules/@aws-amplify/datastore/lib-esm/datastore/datastore.js:101:139:
      101 │ ...alarType, isSchemaModelWithAttributes, AuthModeStrategyType, isNonModelFieldType, isModelFieldType, __modelMeta__, isIdentifierObject, } from '../types';
          ╵                                                                                                        ~~~~~~~~~~~~~

12:41:06 PM [vite] error while updating dependencies:
Error: Build failed with 2 errors:
node_modules/@aws-amplify/datastore/lib-esm/datastore/datastore.js:101:139: ERROR: No matching export in "node_modules/@aws-amplify/datastore/lib-esm/types.js" for import "__modelMeta__"
node_modules/@aws-amplify/datastore/lib-esm/sync/index.js:72:17: ERROR: No matching export in "node_modules/@aws-amplify/datastore/lib-esm/types.js" for import "__modelMeta__"
    at failureErrorWithLog (/files/projects/serverless-inventory/node_modules/esbuild/lib/main.js:1566:15)
    at /files/projects/serverless-inventory/node_modules/esbuild/lib/main.js:1024:28
    at runOnEndCallbacks (/files/projects/serverless-inventory/node_modules/esbuild/lib/main.js:1438:61)
    at buildResponseToResult (/files/projects/serverless-inventory/node_modules/esbuild/lib/main.js:1022:7)
    at /files/projects/serverless-inventory/node_modules/esbuild/lib/main.js:1134:14
    at responseCallbacks.<computed> (/files/projects/serverless-inventory/node_modules/esbuild/lib/main.js:671:9)
    at handleIncomingPacket (/files/projects/serverless-inventory/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/files/projects/serverless-inventory/node_modules/esbuild/lib/main.js:647:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

Expected behavior

The app should launch normally

Reproduction steps

After having a backend configured via amplify init:

1. yarn add aws-amplify
2. Import Amplify into my main component (not even try to configure it yet):
   • import Amplify from 'aws-amplify';
3. yarn dev
4. Server crashes and the stacktrace above is printed

Code Snippet

// Put your code below this line.
import Amplify from 'aws-amplify';

Log output

// Put your logs below this line

aws-exports.js

const awsmobile = {
    "aws_project_region": "us-west-2",
    "aws_dynamodb_all_tables_region": "us-west-2",
    "aws_dynamodb_table_schemas": [
        {
            "tableName": "xxxx-dev",
            "region": "us-west-2"
        }
    ],
    "aws_cloud_logic_custom": [
        {
            "name": "xxxx",
            "endpoint": "https://xxxxx.execute-api.us-west-2.amazonaws.com/dev",
            "region": "us-west-2"
        }
    ]
};

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[xaguzman]

@tannerabread upgrading to 4.3.39 resolved the issue, thanks!

[tannerabread]

Hi 👋 Closing this as resolved. Version 4.3.39 should have fixed this Vite issue. If you are still experiencing this issue and in need of assistance, please feel free to comment and provide us with additional information so we can re-open this issue and be better able to assist you.

Thank you!