Created package not grabbing correct components when imported

[czabriskie]

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?

Authenticator

How is your app built?

Create React App

What browsers are you seeing the problem on?

No response

Please describe your bug.

I've created a package that wraps aws-amplify to be used in many applications.

The component works until I package it up and try importing it to another project. When importing the package through npm, I get a ton of WARN ERESOLVE overriding peer dependency messages. When I try importing the "authWrap" component (see code below) into another file I get the following error when I start the app.

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /node_modules/authWrapper/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (22:17):

return (
> 22 |                 <View textAlign="center" padding={tokens.space.large}>
     |                 ^
  23 |                     <Image
  24 |                         alt="logo"
  25 |                         src={logo}

It looks like it cannot find the correct amplify components to use in the JSX.

What's the expected behaviour?

When packaged, I expect when importing the app to have all of the relevant dependencies for the import. The packaged component should work when imported into a new project.

Help us reproduce the bug!

If you use my code snippet below to create the amplify component and package it, then try creating a new project and wrapping your code. You should get the error.

Code Snippet

import React, { useEffect } from "react";
import Amplify from 'aws-amplify'
import {Authenticator, Image, ThemeProvider, useTheme, View, Heading, defaultDarkModeOverride} from '@aws-amplify/ui-react';
import awsconfig from './aws-exports';
import '@aws-amplify/ui-react/styles.css';
import logo from './logo.png';

export function authWrap({children}) {
    const [colorMode, setColorMode] = React.useState('system');
        const theme = {
            name: 'my-theme',
            overrides: [defaultDarkModeOverride],
        };

    Amplify.configure(awsconfig);

    const components = {
        Header() {
            const { tokens } = useTheme();

            return (
                <View textAlign="center" padding={tokens.space.large}>
                    <Image
                        alt="logo"
                        src={logo}
                    />
                </View>
            );
        },
        SignIn: {
            Header() {
                const { tokens } = useTheme();

                return (
                    <Heading
                        padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
                        level={3}
                    >
                        Sign in
                    </Heading>
                );
            },
        },
    }
    useEffect(() => { document.body.style.backgroundColor = 'blue' }, [])
  return (

      <ThemeProvider theme={theme} colorMode={colorMode}>
      <Authenticator components={components}>

          {({ signOut, user}) => (
              <div>
                  {children}
              </div>
          )}
      </Authenticator>
      </ThemeProvider>
  );
}

Below is the tree of my package as well as the contents of the package.json file.

├── aws-exports.js
├── logo.png
├── index.js
└── package.json

{
  "name": "authWrapper",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@aws-amplify/ui-react": "^3.4.1",
    "aws-amplify": "^4.3.32",
    "react": "^18.2.0"
  }
}

Additional information and screenshots

I posted this on stackoverflow and got a reply from ErikCH who told me I should post it here as an issue.

https://stackoverflow.com/questions/73426049/created-package-not-grabbing-correct-components-when-imported/73493762#73493762

[ErikCH]

Hi @czabriskie !

Thanks for posting this. Can I get some more information on how you are creating this package? Are you bundling it with something like rollup? Or Vite? Maybe you can share your configs so I can try to reproduce it.

[czabriskie]

Hi @ErikCH

I've created the repo that I've tried this with at https://github.com/czabriskie/amplify-cognito-pkg.

I'm not using anything fancy to build the package. All I am doing is

1. npm install to install required pacakges
2. npm run build
3. npm pack

Then add the package path to my package.json file.

I have removed the amplify file in my repo, but the tag should still work. You just won't be able to get past it.

Thanks for your help.

[ErikCH]

Hi @czabriskie !

Sorry for the long delay. Thanks for the app.

What's happening here is that Create React App doesn't transpile JSX in the node_modules folder. That's why you are seeing that error. This StackOverflow explains the problem. You can get around this by using craco, and have it transpile it as shown in the SO. I tried it with your repo and it fixed it. Though, you shouldn't include the Amplify.configure in your package with the aws-exports file. That should be in the app that's importing in the module.

The better way of doing this is to use rollup or vite or tsup and have it build and create the bundle for you. Then you can create a proper package.json with the proper package exports. This vite guide was helpful for me. Let me know if that helps!