How to resolve Amplify Accordion UI throwing ambiguous indirect export SyntaxError (ui-react)?

Hello,

The SyntaxError: ambiguous indirect export error occurs when there is a conflict between how modules are imported and exported in JavaScript code. CommonJS and ES modules handle imports and exports differently.

I have tried to replicate and test your issue using sample app built via Vite with React. I followed below steps to create app and use "Accordion" UI Component.

1. npm create vite@latest my-studio-app-vite --template react-ts
2. cd my-studio-app-vite
3. npm install
4. npm install aws-amplify/ui-react
5. Updated "App.tsx" file

import { Accordion } from '@aws-amplify/ui-react';

      <div>
        <p>Amplify UI Accordion</p>
        <Accordion
          items={[
            {
              trigger: "Is it accessible?",
              value: "accessible",
              content:
                "Yes! It uses HTML native elements: <details> and <summary>.",
            },
            {
              trigger: "Can I customize the styling?",
              value: "styling",
              content: "Of course! See the section on CSS Styling below.",
            },
            {
              trigger: "Is it a great way to organize content?",
              value: "content",
              content: "Most definitely!",
            },
          ]}
        />
      </div>

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Kindly check and verify your package.json , tsconfig.json and tsconfig.node.json files to resolve this error.

Amplify UI component related issues and errors you may check https://github.com/aws-amplify/amplify-ui/issues

Having said that, in case you face further challenges, please feel free to open a support case with AWS using the following link as this will allow us to provide you resource specific guidance and dive deep into the same.