NextjsにReact Spectrumを導入する時は一手間かける必要がある。
next.config.jsに挿入する。
@adobe/react-spectrum 3.29.0
next 13.4.19
以上のバージョンだと上記の公式通りで動作した。
以下は、少し前の環境で動作した例。
@adobe/react-spectrum 3.28.0
next 13.4.10
上記のページの記述を修正しないと動作しなかった。
参考までに載せたが、公式のほうを採用して。
module.exports = { transpilePackages: [ '@adobe/react-spectrum', '@react-spectrum/actionbar', '@react-spectrum/actiongroup', '@react-spectrum/color', '@react-spectrum/avatar', '@react-spectrum/badge', '@react-spectrum/breadcrumbs', '@react-spectrum/button', '@react-spectrum/buttongroup', '@react-spectrum/calendar', '@react-spectrum/checkbox', '@react-spectrum/combobox', '@react-spectrum/contextualhelp', '@react-spectrum/datepicker', '@react-spectrum/dialog', '@react-spectrum/divider', '@react-spectrum/dnd', '@react-spectrum/form', '@react-spectrum/icon', '@react-spectrum/illustratedmessage', '@react-spectrum/image', '@react-spectrum/inlinealert', '@react-spectrum/label', '@react-spectrum/labeledvalue', '@react-spectrum/layout', '@react-spectrum/link', '@react-spectrum/list', '@react-spectrum/listbox', '@react-spectrum/menu', '@react-spectrum/meter', '@react-spectrum/numberfield', '@react-spectrum/overlays', '@react-spectrum/picker', '@react-spectrum/progress', '@react-spectrum/provider', '@react-spectrum/radio', '@react-spectrum/slider', '@react-spectrum/searchfield', '@react-spectrum/statuslight', '@react-spectrum/switch', '@react-spectrum/table', '@react-spectrum/tabs', '@react-spectrum/tag', '@react-spectrum/text', '@react-spectrum/textfield', '@react-spectrum/theme-dark', '@react-spectrum/theme-default', '@react-spectrum/theme-light', '@react-spectrum/tooltip', '@react-spectrum/view', '@react-spectrum/well', '@spectrum-icons/illustrations', '@spectrum-icons/ui', '@spectrum-icons/workflow' ] };
本体React Spectrumをアップデートしたならば、この記述も見直さなければいけない場合があった。