Реагировать | аос | узел | Неизвестное расширение файла ".css" для /home/user/.../aos/dist/aos.css с ⇐ CSS

[Anonymous]

Я пытаюсь использовать aos на веб-сайте, основанном на React.
Вот компонент, который я создал в соответствии с https://getisotope.com/post/react-aos:< /p>
//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(
Sample heading
)
}

В декларациях.d.ts есть декларация:
export * from './AOSs.tsx'

И я пытался использовать его в компоненте страницы как .
Но когда я пытаюсь чтобы запустить веб-сайт локально (yarn run dev), выдает следующую ошибку:
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.

Я пытался скопировать aos.css в папку src.
Но получилось:
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.js15)
at /home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/node_modules/esbuild/lib/main.js25
at runOnEndCallbacks (/home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/node_modules/esbuild/lib/main.js45)
at buildResponseToResult (/home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/node_modules/esbuild/lib/main.js7)
at /home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/node_modules/esbuild/lib/main.js16
at responseCallbacks. (/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.

В случае, если это поможет:
Вот 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"
}
}

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

И структура:
├── 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.


Подробнее здесь: https://stackoverflow.com/questions/786 ... aos-dist-a