[bug] bunx create-gramio with biome and a bunch of plugins has errors #16
Description
Just tried using gramIO for the first time and I ran into several issues before init ended when biome ran:
❯ bunx create-gramio tgbot-gramio
✔ Select type of project: · Mini App + Bot + Elysia (backend framework) monorepo
Be worried about monorepo selection, it can be buggy or not so convenient because support both monorepo and just bot project is not so easy.
Also we don't have our own mini-app templates so it will force pnpm as package manager and etc
Choose your Telegram Mini App!
✔ Directory name: … mini-app
✔ Preferred technologies: React.js, TypeScript and @telegram-apps
✔ Git remote repository URL: …
✔ Cloned template: github.com/Telegram-Mini-Apps/reactjs-template
✔ .git directory removed.
Your project has been successfully initialized!
Now, open the "mini-app" directory and follow the instructions presented in the README.md file. Happy coding! 🚀
Choose your Elysia!
✔ Select Elysia plugins: (Space to select, Enter to continue) · No items were selected
✔ Template generation is complete!
✔ git init
✔ bun install
Choose your Telegram bot!
✔ Select linters/formatters: · Biome
✔ Select ORM/Query Builder: · Drizzle
✔ Select DataBase for Drizzle: · SQLite
✔ Select driver for SQLite: · bun:sqlite
✔ Select GramIO plugins: (Space to select, Enter to continue) · I18n, Media-group, Media-cache, Autoload, Session, Prompt, Posthog, Split, Pagination, Auto-retry
✔ Select type of i18n localization usage: · I18n-in-TS
✔ Select languages: · en
✔ Do you want to use webhook adapter on production?: · Bun.serve
✔ Select others tools: (Space to select, Enter to continue) · Posthog
✔ Create an empty Git repository? · no / yes
✔ Do you want to use Locks to prevent race conditions? · no / yes
✔ Create Dockerfile + docker.compose.yml? · no / yes
✔ Create .vscode folder with VSCode extensions recommendations and settings? · no / yes
Error: Command failed: bun x @biomejs/biome check --fix --skip-errors
/Users/adrian/Developer/tgbot-gramio/apps/mini-app/src/components/Page.tsx:13:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━
× This hook does not specify all of its dependencies: navigate
11 │ const navigate = useNavigate();
12 │
> 13 │ useEffect(() => {
│ ^^^^^^^^^
14 │ if (back) {
15 │ showBackButton();
i This dependency is not specified in the hook dependency list.
15 │ showBackButton();
16 │ return onBackButtonClick(() => {
> 17 │ navigate(-1);
│ ^^^^^^^^
18 │ });
19 │ }
/Users/adrian/Developer/tgbot-gramio/apps/mini-app/src/components/DisplayData/DisplayData.tsx:53:16 lint/suspicious/noArrayIndexKey ━━━━━━━━━━
× Avoid using the index of an array as key property in an element.
51 │ readOnly
52 │ multiline={true}
> 53 │ key={idx}
│ ^^^
54 │ >
55 │ <span className={e('line-value')}>
i This is the source of the key value.
26 │ export const DisplayData: FC<DisplayDataProps> = ({ header, rows }) => (
27 │ <Section header={header}>
> 28 │ {rows.map((item, idx) => {
│ ^^^
29 │ let valueNode: ReactNode;
30 │
i The order of the items may change, and this also affects performances and component state.
...The project looks amazing, thanks!