AWS Amplify React styles cause errors

Question

We're using AWS Amplify for authentication, and since we load its styles, they get applied to our whole app.

So to make everything look right in Storybook, we have import '@aws-amplify/ui-react/styles.css'; in .storybook/preview.js. In Storybook this works fine.

However, when I run Jest, it errors out with

Cannot find module '@aws-amplify/ui-react/styles.css' from '.storybook/preview.js'

I'm able to "fix" this with

if (process.env.NODE_ENV !== 'test') {
  import('@aws-amplify/ui-react/styles.css');
}

But I'd rather know why this is happening and fully fix it.

My versions are

"@aws-amplify/ui-react": "2.5.0",
"aws-amplify": "^4.3.14"

I did try updating "@aws-amplify/ui-react" to the latest but then I was getting errors (mainly from Typescript, I think) when running the actual app, too.

Here are some relevant files

package.json

{
  "name": "super-draft-core-admin-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "2.5.0",
    "@craco/craco": "^6.4.3",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@fontsource/roboto": "^4.5.5",
    "@mui/material": "^5.6.0",
    "@mui/x-data-grid": "^5.8.0",
    "@mui/x-data-grid-pro": "^5.12.0",
    "@reduxjs/toolkit": "^1.8.2",
    "@superdraft/super-draft-common": "^1.2.7",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.0",
    "@types/lodash": "^4.14.180",
    "@types/node": "^16.11.25",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "awesome-debounce-promise": "^2.1.0",
    "aws-amplify": "^4.3.14",
    "axios": "^0.26.1",
    "bootstrap": "^5.1.3",
    "formik": "^2.2.9",
    "jwt-decode": "^3.1.2",
    "lodash.debounce": "^4.0.8",
    "react": "^17.0.2",
    "react-bootstrap": "^2.1.2",
    "react-debounce-input": "^3.2.5",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-json-view": "^1.21.3",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "react-toggle-slider": "^0.4.0",
    "styled-components": "^5.3.5",
    "use-constant": "^1.1.0",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "format": "prettier --write \"src/**/*.ts\"",
    "prepare": "husky install",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public",
    "test-storybook": "test-storybook"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@mui/icons-material": "^5.6.0",
    "@storybook/addon-a11y": "^6.5.6",
    "@storybook/addon-actions": "^6.5.6",
    "@storybook/addon-essentials": "^6.5.6",
    "@storybook/addon-interactions": "^6.5.6",
    "@storybook/addon-links": "^6.5.6",
    "@storybook/builder-webpack5": "^6.5.6",
    "@storybook/jest": "^0.0.10",
    "@storybook/manager-webpack5": "^6.5.6",
    "@storybook/node-logger": "^6.5.6",
    "@storybook/preset-create-react-app": "^4.1.1",
    "@storybook/react": "^6.5.6",
    "@storybook/test-runner": "^0.1.1",
    "@storybook/testing-library": "^0.0.11",
    "@storybook/testing-react": "^1.3.0",
    "@testing-library/react": "^12.1.5",
    "@testing-library/react-hooks": "^8.0.1",
    "@types/lodash.debounce": "^4.0.6",
    "@types/styled-components": "^5.1.25",
    "@typescript-eslint/eslint-plugin": "^5.26.0",
    "@typescript-eslint/parser": "^5.26.0",
    "babel-plugin-named-exports-order": "^0.0.2",
    "babel-plugin-styled-components": "^2.0.7",
    "chromatic": "^6.6.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^2.7.1",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    "husky": "^8.0.0",
    "jira-prepare-commit-msg": "^1.6.2",
    "miragejs": "^0.1.45",
    "prettier": "^2.6.2",
    "prop-types": "^15.8.1",
    "storybook-addon-react-dev-tools": "^1.1.0",
    "storybook-addon-react-router-v6": "^0.1.8",
    "storybook-mirage": "^0.0.7",
    "ts-node": "^10.5.0",
    "typescript": "^4.5.5",
    "webpack": "^5.72.1"
  },
  "jira-prepare-commit-msg": {
    "jiraTicketPattern": "([A-Z0-9]+-\\d+)"
  }
}

setupTests.ts

(I think this is our only jest config)

// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
import { setGlobalConfig } from '@storybook/testing-react';
import * as globalStorybookConfig from '../.storybook/preview';

setGlobalConfig(globalStorybookConfig);

Update: After renaming preview to preview.tsx there's an error on the conditional import:

TS2307: Cannot find module '@aws-amplify/ui-react/styles.css' or its corresponding type declarations.

I am of course familiar with this type of error. However:

$ npm i @types/@aws-amplify                                                                                                         5s
npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name "@types/": name can only contain URL-friendly characters