I am trying to use aos on a website based on React.

Here is the component I created according to https://getisotope.com/post/react-aos:

//AOSs.tsx
import AOS from "aos";
import "aos/dist/aos.css";
import { useEffect } from "react";


export function AOStry(){
    useEffect(() => {
        AOS.init({
          disable: "phone",
          duration: 700,
          easing: "ease-out-cubic",
        });
      }, []);
    return(
        <h1 data-aos="zoom-y-out">Sample heading</h1>
    )
}

In declarations.d.ts is the declaration:

export * from './AOSs.tsx'

And I tried to use it on a page-component as <AOStry></AOStry> .

But when I try to run the website locally (yarn run dev), it gives me the following error:

yarn run v1.22.22
$ vite
failed to load config from /home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/vite.config.js
error when starting dev server:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/node_modules/aos/dist/aos.css
    at new NodeError (node:internal/errors:405:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:124:36)
    at defaultLoad (node:internal/modules/esm/load:89:20)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:603:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
    at new ModuleJob (node:internal/modules/esm/module_job:64:26)
    at #createModuleJob (node:internal/modules/esm/loader:480:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34)
error Command failed with exit code 1.

I tried copying the aos.css in my src folder.
But theeen it did:

yarn run v1.22.22
$ vite
✘ [ERROR] Could not resolve "./aos.css"

    src/components/AOSs.tsx:3:7:
      3 │ import "./aos.css";
        ╵        ~~~~~~~~~~~

failed to load config from /home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/vite.config.js
error when starting dev server:
Error: Build failed with 1 error:
src/components/AOSs.tsx:3:7: ERROR: Could not resolve "./aos.css"
    at failureErrorWithLog (/home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/node_modules/esbuild/lib/main.js:1651:15)
    at /home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/node_modules/esbuild/lib/main.js:1059:25
    at runOnEndCallbacks (/home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/node_modules/esbuild/lib/main.js:1486:45)
    at buildResponseToResult (/home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/node_modules/esbuild/lib/main.js:1057:7)
    at /home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/node_modules/esbuild/lib/main.js:1086:16
    at responseCallbacks.<computed> (/home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/node_modules/esbuild/lib/main.js:704:9)
    at handleIncomingPacket (/home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/node_modules/esbuild/lib/main.js:764:9)
    at Socket.readFromStdout (/home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/node_modules/esbuild/lib/main.js:680:7)
    at Socket.emit (node:events:517:28)
    at addChunk (node:internal/streams/readable:335:12)
error Command failed with exit code 1.

In case it helps:
Here is the package.json

{
  "name": "team-slug",
  "version": "0.0.1",
  "license": "CC-BY-4.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "format": "prettier --write "**/*.{ts,tsx,md,json,css}"",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@gsap/react": "^2.1.1",
    "@mui/lab": "^5.0.0-alpha.170",
    "@mui/material": "^5.15.21",
    "@popperjs/core": "^2.11.8",
    "aos": "^2.3.4",
    "bootstrap": "^5.3.3",
    "d3": "^7.9.0",
    "gsap": "^3.12.5",
    "react": "^18.2.0",
    "react-bootstrap": "^2.10.2",
    "react-d3-library": "^1.0.4",
    "react-dom": "^18.2.0",
    "react-pdf": "^9.0.0",
    "react-photo-album": "^2.4.1",
    "react-router-dom": "^6.23.0",
    "react-select": "^5.8.0"
  },
  "devDependencies": {
    "@types/aos": "^3.0.7",
    "@types/d3": "^7.4.3",
    "@types/node": "^20.12.10",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "prettier": "^3.2.5",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

and 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"]
  }

And the structure:

├── README.md                       -> The file you are currently reading
├── index.html                      -> Single HTML file for the wiki
├── package.json                    -> Manages project metadata and dependencies
├── src/
│   ├── components/                 -> Components (Like Navbar, Timelines, ...)
│   ├── App/                        -> Main React application container
|   |     ├── App.tsx
|   |     └── App.css
│   ├── contents/                   -> Page components for the website
│   │   ├── *.tsx                   
│   │   └── index.ts                -> Declaration file 
│   ├── main.tsx                    -> Entry point of the wiki application
│   ├── pages.ts                    -> Page definition and path mapping
│   ├── utils/                      -> Utility functions
|   |       ├── *.js                -> Extra js files
|   |       └── *.ts                -> Given ts files 
│   └── vite-env.d.ts               -> TypeScript definitions for Vite
├── tsconfig.json                   -> Configures TypeScript options
├── tsconfig.node.json              -> TypeScript settings for Node.js
├── vite.config.ts                  -> Configuration for the Vite tool
└── yarn.lock                       -> Yarn lock file for dependency management
``
There are some dependency issues with the react-3d-library I did not fix yet but they seem completly unrelated.