メインコンテンツまでスキップ

❓ トラブルシューティング & FAQ

よくある問題、解決策、よくある質問 🔧

このガイドでは、Nodeblocksフロントエンドコンポーネントを使用する際に開発者が最も頻繁に遭遇する問題とその解決策について説明します。

📋 目次​

🚨 インストールの問題​

パッケージが見つからないエラー​

問題:

npm ERR! 404 Not Found - GET https://registry.npmjs.org/@nodeblocks%2ffrontend-navbar-block

解決策:

  1. .npmrc設定を確認:
# .npmrcが存在し、正しい内容であることを確認
cat .npmrc
  1. トークンが設定されていることを確認:
echo $NODEBLOCKS_DEV_TOKEN
  1. レジストリ設定を確認:
@nodeblocks:registry=https://registry.npmjs.org
@basaldev:registry=https://registry.npmjs.org
//registry.npmjs.org/:_authToken=${NODEBLOCKS_DEV_TOKEN}

認証失敗（401エラー）​

問題:

npm ERR! 401 Unauthorized - GET https://registry.npmjs.org/@nodeblocks/...

解決策:

  1. トークンの有効性を確認:

    • 新しいトークンについてNodeblocksチームにお問い合わせください
    • トークンが期限切れでないことを確認

  2. 環境変数を確認:

# Linux/macOS
export NODEBLOCKS_DEV_TOKEN=your_actual_token_here

# Windows
set NODEBLOCKS_DEV_TOKEN=your_actual_token_here
  1. npmキャッシュをクリア:
npm cache clean --force

ピア依存関係の警告​

問題:

npm WARN peer dep missing: react@^18.0.0, required by @nodeblocks/frontend-navbar-block

解決策: 正しいReactバージョンをインストール:

npm install react@^18.0.0 react-dom@^18.0.0
npm install --save-dev @types/react@^18.0.0 @types/react-dom@^18.0.0

⚛️ React互換性​

React 19互換性の問題​

問題: React 19でコンポーネントが動作しない。

解決策: NodeblocksはReact 18が必要です。Reactバージョンをダウングレードしてください:

# React 18にダウングレード
npm install react@^18.0.0 react-dom@^18.0.0

# TypeScript型を更新
npm install --save-dev @types/react@^18.0.0 @types/react-dom@^18.0.0

React 19はいつサポートされますか？ React 19の互換性に積極的に取り組んでいます。更新情報については変更ログをご確認ください。

🔐 認証とレジストリ​

プライベートパッケージにアクセスできない​

問題: @nodeblocksパッケージで404またはアクセス拒否エラーが発生する。

チェックリスト:

  1. ✅ プロジェクトルートに.npmrcファイルが存在する
  2. ✅ レジストリ設定が正しい
  3. ✅ NODEBLOCKS_DEV_TOKEN環境変数が設定されている
  4. ✅ トークンが有効で期限切れでない
  5. ✅ アクセス権限がある

簡単な修正:

# 現在のnpm設定を確認
npm config list

# nodeblocksレジストリ設定を確認
npm config get @nodeblocks:registry

トークン環境変数が機能しない​

問題: トークンを設定したが、まだ認証エラーが発生する。

解決策:

  1. 現在のセッション用:
# Linux/macOS
export NODEBLOCKS_DEV_TOKEN=your_token

# Windows Command Prompt
set NODEBLOCKS_DEV_TOKEN=your_token

# Windows PowerShell
$env:NODEBLOCKS_DEV_TOKEN="your_token"
  1. 永続的な設定:
# Linux/macOS - ~/.bashrcまたは~/.zshrcに追加
echo 'export NODEBLOCKS_DEV_TOKEN=your_token' >> ~/.bashrc

# Windows - システム環境変数を使用
  1. トークンが読み込まれていることを確認:
npm install --verbose

🔧 設定の問題​

環境変数が機能しない​

問題: サービスエンドポイントが環境変数から読み込まれない。

フレームワーク固有の解決策:

Vite:

# VITE_で始まる必要があります
VITE_USER_SERVICE_URL=https://api.example.com
// コンポーネントでアクセス
const userServiceUrl = import.meta.env.VITE_USER_SERVICE_URL;

Create React App:

# REACT_APP_で始まる必要があります
REACT_APP_USER_SERVICE_URL=https://api.example.com
// コンポーネントでアクセス
const userServiceUrl = process.env.REACT_APP_USER_SERVICE_URL;

🎨 スタイリングとUIの問題​

コンポーネントが期待と異なって見える​

問題: コンポーネントが期待されるデザインやドキュメントと一致しない。

解決策:

  1. グローバルCSSの競合を確認:
/* グローバルスタイルが干渉している可能性があります */
* {
  box-sizing: border-box; /* これがコンポーネントレイアウトに影響する可能性があります */
}
  1. コンポーネント固有のスタイリングを使用:
<SignIn
  style={{
    maxWidth: '400px',
    margin: '0 auto',
    padding: '2rem'
  }}
>
  {/* コンポーネントの内容 */}
</SignIn>
  1. コンポーネントがスタイルを受け付けない場合:
/* より高い特異性を使用してコンポーネントスタイルをオーバーライド */
#root .your-component-class {
  /* ここにカスタムスタイル */
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 1rem;
}

/* より具体的なオーバーライドには、複数のセレクタを使用 */
#root .product-grid .product-item {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

❓ よくある質問​

一般的な質問​

Q: React 19でNodeblocksを使用できますか？ A: 現在はできません。NodeblocksはReact 18が必要です。React 19サポートは開発中です。

Q: すべてのコンポーネントをインストールする必要がありますか？ A: いいえ！必要なコンポーネントのみをインストールしてください。各コンポーネントは別々のパッケージです。

Q: スタイリングをカスタマイズできますか？ A: もちろんです！コンポーネントはstyleプロパティを受け取り、CSS-in-JSやCSSモジュールでスタイリングできます。

技術的な質問​

Q: NodeblocksはTypeScriptで動作しますか？ A: はい、すべてのコンポーネントにTypeScript定義が含まれています。

Q: ReduxなどのState管理ライブラリとNodeblocksを使用できますか？ A: はい、ただしDomain Appには組み込みの状態管理が提供されています。必要に応じて外部状態と統合できます。

Q: フォームバリデーションはどのように処理しますか？ A: setError、getValues、clearErrors関数でonChangeプロパティを使用します。

Q: コンポーネントの動作をオーバーライドできますか？ A: はい、例えばブロックオーバーライドパターンを使用して。高度な使用法ガイドをご覧ください。

別の問題がありますか？具体的な問題の詳細とともにサポートチームにお問い合わせください。