Closed Nozomi-Hijikata closed 6 months ago
過去にNextUIのコンポーネントのバグを修正したPRをあげていたが、8ヶ月くらいauthorからレスポンスがない
最新バージョンでも既存バグが残っているようだ。
他の方からレスポンスはいただいているもいただいているので、できれば直したい
その当時はIssueでコントロールされていなかった気がするが、2024/04/18現在Issue管理をしているようだ。 一旦Issueを立てた
Issueを漁ってみる
startup docsが更新されているっぽいので、改めて順繰りに立ち上げてみる。 その中で気づいたことを残す。
https://react-spectrum.adobe.com/react-aria/ https://github.com/adobe/react-spectrum adobeがreact componentのライブラリを公開している。
~betaの時は使ってなかった気がする~ →嘘使ってた
Welcome to the NextUI documentation! NextUI allows you to make beautiful, modern, and fast websites/applications regardless of your design experience, created with React.js and Stitches, based on React Aria and inspired by Vuesax.
内部的に、Framer motionを使ってる https://www.framer.com/motion/
Framer motionのIntroductionのページでエラーが出た。(キャッシュを削除しても発生)
ログ
19Third-party cookie will be blocked. Learn more in the Issues tab.
api.framer.com/site/users/me:1
Failed to load resource: the server responded with a status of 401 ()
client:49 [GSI_LOGGER]: Your client application may not display the Google One Tap in its default position. When FedCM becomes mandatory, One Tap only displays in the default position. Refer to the migration guide to update your code accordingly and opt-in to FedCM to test your changes. Learn more: https://developers.google.com/identity/gsi/web/guides/fedcm-migration?s=dc#layout
_.y @ client:49
client:49 [GSI_LOGGER]: Your client application uses one of the Google One Tap prompt UI status methods that may stop functioning when FedCM becomes mandatory. Refer to the migration guide to update your code accordingly and opt-in to FedCM to test your changes. Learn more: https://developers.google.com/identity/gsi/web/guides/fedcm-migration?s=dc#display_moment and https://developers.google.com/identity/gsi/web/guides/fedcm-migration?s=dc#skipped_moment
_.y @ client:49
examples/:1 Third-party sign in was disabled in browser Site Settings.
api.framer.com/auth/signin:1
Failed to load resource: the server responded with a status of 401 ()
api.framer.com/site/users/me:1
Failed to load resource: the server responded with a status of 401 ()
client:50 [GSI_LOGGER]: FedCM get() rejects with AbortError: signal is aborted without reason
_.z @ client:50
examples/:1 Third-party sign in was disabled in browser Site Settings.
framework-336caa3f6419768205fe.js:1 TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
at [slug]-eefd1fea1566058c1e89.js:1:14699
at Ii (framework-336caa3f6419768205fe.js:1:105602)
at t.unstable_runWithPriority (framework-336caa3f6419768205fe.js:1:130401)
at Wl (framework-336caa3f6419768205fe.js:1:45773)
at Oi (framework-336caa3f6419768205fe.js:1:105063)
at framework-336caa3f6419768205fe.js:1:104974
at D (framework-336caa3f6419768205fe.js:1:129460)
at w.port1.onmessage (framework-336caa3f6419768205fe.js:1:128182)
uu @ framework-336caa3f6419768205fe.js:1
main-a3d202dbe74dc08b5ac7.js:1 TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
at [slug]-eefd1fea1566058c1e89.js:1:14699
at Ii (framework-336caa3f6419768205fe.js:1:105602)
at t.unstable_runWithPriority (framework-336caa3f6419768205fe.js:1:130401)
at Wl (framework-336caa3f6419768205fe.js:1:45773)
at Oi (framework-336caa3f6419768205fe.js:1:105063)
at framework-336caa3f6419768205fe.js:1:104974
at D (framework-336caa3f6419768205fe.js:1:129460)
at w.port1.onmessage (framework-336caa3f6419768205fe.js:1:128182)
le @ main-a3d202dbe74dc08b5ac7.js:1
main-a3d202dbe74dc08b5ac7.js:1 A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred
le @ main-a3d202dbe74dc08b5ac7.js:1
api.framer.com/auth/signin:1
Failed to load resource: the server responded with a status of 401 ()
api.framer.com/site/users/me:1
Failed to load resource: the server responded with a status of 401 ()
client:50 [GSI_LOGGER]: FedCM get() rejects with AbortError: signal is aborted without reason
_.z @ client:50
introduction/:1 Third-party sign in was disabled in browser Site Settings.
client:50 [GSI_LOGGER]: FedCM get() rejects with NetworkError: Error retrieving a token.
Safariでもだめ。
https://nextuioss.featurebase.app/roadmap
roadmapを見れるようにしているのか。リッチだ
初期化のスタートアップを行う
CLIツールができてる
npm install -g nextui
nextui init my-nextui-app
かっちょええ ※app routerで起動
createしたディレクトリで叩くとエラー
npm run dev
> next-app-template@0.0.1 dev
> next dev
sh: next: command not found
npm run dev
❯ npm --version
10.2.0
npm updateをトライ中
npm WARN ERESOLVE overriding peer dependency
added 470 packages, and audited 471 packages in 29s
138 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
❯ npm run dev
> next-app-template@0.0.1 dev
> next dev
▲ Next.js 14.2.1
- Local: http://localhost:3000
✓ Starting...
✓ Ready in 2.1s
worked!
❯ nextui init s-app
NextUI CLI v0.1.5
✔ Select a template › Pages
✔ Template created successfully!
~/environment/oss-workshop
❯ cd s-app
~/environment/oss-workshop/s-app
❯ npm run dev
> next-pages-template@0.1.0 dev
> next dev
sh: next: command not found
pages routerでも再現
npm update
をするだけだし、bugではないが、
updateをすることが場合によっては必要であることを明記した方がよくないか?
v1だと bundle時点で除去
NextUI uses tree-shaking so the unused modules will not be included in the bundle during the build process and each component is exported separately.
v2だと必要なcomponentをaddする形式に変更
https://nextui.org/docs/guide/upgrade-to-v2
ここにv1とv2の差分がありそう
nextui init
コマンドだとほとんどがUNMET
❯ npm list --depth=0
npm ERR! code ELSPROBLEMS
npm ERR! missing: @nextui-org/button@^2.0.28, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/code@^2.0.25, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/input@^2.1.18, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/kbd@^2.0.26, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/link@^2.0.27, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/navbar@^2.0.28, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/snippet@^2.0.32, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/switch@^2.0.26, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/system@2.1.0, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/theme@2.2.0, required by next-app-template@0.0.1
npm ERR! missing: @react-aria/ssr@^3.9.2, required by next-app-template@0.0.1
npm ERR! missing: @react-aria/visually-hidden@^3.8.10, required by next-app-template@0.0.1
npm ERR! missing: @types/node@20.5.7, required by next-app-template@0.0.1
npm ERR! missing: @types/react-dom@18.2.7, required by next-app-template@0.0.1
npm ERR! missing: @types/react@18.2.21, required by next-app-template@0.0.1
npm ERR! missing: autoprefixer@10.4.19, required by next-app-template@0.0.1
npm ERR! missing: clsx@^2.0.0, required by next-app-template@0.0.1
npm ERR! missing: eslint-config-next@14.2.1, required by next-app-template@0.0.1
npm ERR! missing: eslint@8.48.0, required by next-app-template@0.0.1
npm ERR! missing: framer-motion@^11.1.1, required by next-app-template@0.0.1
npm ERR! missing: intl-messageformat@^10.5.0, required by next-app-template@0.0.1
npm ERR! missing: next-themes@^0.2.1, required by next-app-template@0.0.1
npm ERR! missing: next@14.2.1, required by next-app-template@0.0.1
npm ERR! missing: postcss@8.4.38, required by next-app-template@0.0.1
npm ERR! missing: react-dom@18.2.0, required by next-app-template@0.0.1
npm ERR! missing: react@18.2.0, required by next-app-template@0.0.1
npm ERR! missing: tailwind-variants@^0.1.20, required by next-app-template@0.0.1
npm ERR! missing: tailwindcss@3.4.3, required by next-app-template@0.0.1
npm ERR! missing: typescript@5.0.4, required by next-app-template@0.0.1
next-app-template@0.0.1 /Users/hijikatanozomi/environment/oss-workshop/new-nextui-app
├── UNMET DEPENDENCY @nextui-org/button@^2.0.28
├── UNMET DEPENDENCY @nextui-org/code@^2.0.25
├── UNMET DEPENDENCY @nextui-org/input@^2.1.18
├── UNMET DEPENDENCY @nextui-org/kbd@^2.0.26
├── UNMET DEPENDENCY @nextui-org/link@^2.0.27
├── UNMET DEPENDENCY @nextui-org/navbar@^2.0.28
├── UNMET DEPENDENCY @nextui-org/snippet@^2.0.32
├── UNMET DEPENDENCY @nextui-org/switch@^2.0.26
├── UNMET DEPENDENCY @nextui-org/system@2.1.0
├── UNMET DEPENDENCY @nextui-org/theme@2.2.0
├── UNMET DEPENDENCY @react-aria/ssr@^3.9.2
├── UNMET DEPENDENCY @react-aria/visually-hidden@^3.8.10
├── UNMET DEPENDENCY @types/node@20.5.7
├── UNMET DEPENDENCY @types/react-dom@18.2.7
├── UNMET DEPENDENCY @types/react@18.2.21
├── UNMET DEPENDENCY autoprefixer@10.4.19
├── UNMET DEPENDENCY clsx@^2.0.0
├── UNMET DEPENDENCY eslint-config-next@14.2.1
├── UNMET DEPENDENCY eslint@8.48.0
├── UNMET DEPENDENCY framer-motion@^11.1.1
├── UNMET DEPENDENCY intl-messageformat@^10.5.0
├── UNMET DEPENDENCY next-themes@^0.2.1
├── UNMET DEPENDENCY next@14.2.1
├── UNMET DEPENDENCY postcss@8.4.38
├── UNMET DEPENDENCY react-dom@18.2.0
├── UNMET DEPENDENCY react@18.2.0
├── UNMET DEPENDENCY tailwind-variants@^0.1.20
├── UNMET DEPENDENCY tailwindcss@3.4.3
└── UNMET DEPENDENCY typescript@5.0.4
npm ERR! A complete log of this run can be found in: /Users/hijikatanozomi/.npm/_logs/2024-04-18T05_23_03_039Z-debug-0.log
~/environment/oss-workshop/new-nextui-app
❯
next-app-templateで求められているversionを満たしていないのか。 ↑はNextUIのtemplateになるパッケージ
てことは、npm install
でいいわけか
npm list --depth=0
next-app-template@0.0.1 /Users/hijikatanozomi/environment/oss-workshop/new-nextui-app
├── @nextui-org/button@2.0.28
├── @nextui-org/code@2.0.25
├── @nextui-org/input@2.1.18
├── @nextui-org/kbd@2.0.26
├── @nextui-org/link@2.0.27
├── @nextui-org/navbar@2.0.28
├── @nextui-org/snippet@2.0.32
├── @nextui-org/switch@2.0.26
├── @nextui-org/system@2.1.0
├── @nextui-org/theme@2.2.0
├── @react-aria/ssr@3.9.2
├── @react-aria/visually-hidden@3.8.10
├── @types/node@20.5.7
├── @types/react-dom@18.2.7
├── @types/react@18.2.21
├── autoprefixer@10.4.19
├── clsx@2.0.0
├── eslint-config-next@14.2.1
├── eslint@8.48.0
├── framer-motion@11.1.1
├── intl-messageformat@10.5.5
├── next-themes@0.2.1
├── next@14.2.1
├── postcss@8.4.38
├── react-dom@18.2.0
├── react@18.2.0
├── tailwind-variants@0.1.20
├── tailwindcss@3.4.3
└── typescript@5.0.4
great
nextui init後だとpackage-lock.json
が入っているので、npm install
の項目がdocumentにあった方が良いだろう
PR作ろう
.mdx
ってなんだ、
JSX + markdown!!
おつかれさまでした!
ワークショップの終了にともないissueを閉じますが、このまま作業メモとして使っても構いません :ok_hand:
ワークショップの感想を集めています!
ブログなどに書かれた際は、このページへリンクの追加をお願いします :pray:
またの参加をお待ちしています!
This is a work log of a "OSS Gate workshop". "OSS Gate workshop" is an activity to increase OSS developers. Here's been discussed in Japanese. Thanks.
作業ログ作成時の説明
以下のテンプレートを埋めてタイトルに設定します。埋め方例はスクロールすると見えてきます。
タイトル例↓:
OSS Gateワークショップ関連情報