Next.jsのuseClientが使えなくて困ってます。
解決したいこと
情報求む。
Next.jsのパッケージのnext／clientが何回インストールしても欠落してて困ってます。GitHubにも公開されてるものは無く、新しくプロジェクトを作成しても同じ結果で意味は無く
useClient()が使えません。副作用を多く含んだコンポーネントを使うのでuseEffectは必須。解決策ありますか？
Next.jsのバージョンは13.4.19です。
発生している問題・エラー
Unhandled Runtime Error
TypeError: (0,next_client__WEBPACK_IMPORTED_MODULE_1__.useClient) is not a function. (In '(0,next_client__WEBPACK_IMPORTED_MODULE_1__.useClient)()', '(0,next_client__WEBPACK_IMPORTED_MODULE_1__.useClient)' is undefined)
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
### 該当するソースコード
"use client";
import { useClient } from "next/client";
import { useState, useEffect } from 'react';
import React from 'react';
import MusicLog from './MusicLog';
useClient();
const AudioComponent = () => {
useEffect(() => {
if (typeof window !== "undefined") {
// クライアントサイドのコード
const currentURL = window.location.href;
// ここでcurrentURLを使用できます
}
}, []);
useEffect(() => {
const [isAudioPlaying, setIsAudioPlaying] = useState(false);
});
useEffect(() => {
// ローカルストレージに再生状態を保存
const saveAudioState = localStorage.getItem('audioIsPlaying');
if (saveAudioState !== null) {
setIsAudioPlaying(saveAudioState === 'true');
}
});
// オーディオ再生状態をクッキーに保存
useEffect(() => {
document.cookie = `audioIsPlaying=${isAudioPlaying}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
const cookies = document.cookie.split(';');
for(const cookie of cookies) {
const [name, value ] = cookie.split('=');
if(name === 'audioIsPlaying' && value === true) {
setIsAudioPlaying(true);
}
}
}, []);
useEffect(() => {
// オーディオ再生状態を設定する関数
const setAudioState = (isPlaying) => {
setIsAudioPlaying(isPlaying);
localStorage.setItem('audioIsPlaying', isPlaying);
};
}, []);
// オーディオソースをプリロード
const audioSource = '././music-app/build/music/palm-tree-lullaby.mp3';
// メモ
const AudioMemo = memo((audioSource) => {});
// ボタンクリック時に呼ばれるコールバック関数
const handleAudioButtonClick = () => {
useEffect(() => {
const audio = document.querySelector('#audio');
const logo = document.querySelector('.sound-logo');
audio.preload = 'auto';
if(audio.paused) {
audio.play();
logo.setAttribute('src', '././music-app/build/media/audio-svgrepo-com.svg');
if(typeof setIsAudioPlaying === 'function') {
setIsAudioPlaying(true);
}
} else {
audio.pause();
logo.setAttribute('src', '././music-app/build/media/mute-svgrepo-com.svg');
if(typeof setIsAudioPlaying === 'function') {
setIsAudioPlaying(false);
}
}
}, []);
function getCurrentURL() {
if (typeof window !== "undefined") {
// クライアントサイドのコード
return window.location.href;
}
return null;
}
getCurrentURL();
}
return(
<MusicLog isAudioPlaying={isAudioPlaying} handleAudioButtonClick={handleAudioButtonClick}/>
)
}
export default AudioComponent;
### 自分で試したこと
ここに問題・エラーに対して試したことを記載してください。
Next.jsのアンインストール、再インストール、next／clientのインストール、プロジェクトの再起動
キャッシュのクリア、新規プロジェクトの作成、最新バージョンへのアップデート。
0
