materialize-cssがNext.jsと相性悪そうなのでmaterial-uiに乗り換える
materializecssのSelectを入れたい。 https://materializecss.com/select.html
selectは初期化が必要らしいのだが、next.jsからだと呼べない。 https://materializecss.com/select.html#initialization
materialize-cssっていうnpmがあるので入れてみたけど、importで怒られる。
ReferenceError: window is not defined This error happened while generating the page. Any console logs will be displayed in the terminal window.
browser-default使うと表示されるけどlabelがなぜか避けてくれない。
<div className="input-field col s12"> <select id="surface-hard" className="browser-default"> <option value="" disabled selected> Choose your option </option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <label htmlFor="surface-hard">Materialize Select</label> </div>
materialize-css自体はあまりメンテされてないんだな。2年前...。 https://www.npmjs.com/package/materialize-css
react-materializeっていうのもある。これはメンテされてそう。 https://github.com/react-materialize/react-materialize
Material-UIというのがあって、こっちはNext.js対応してそう。ただしSSR用の設定がいろいろ必要っぽい。 https://material-ui.com/ https://github.com/mui-org/material-ui/tree/master/examples/nextjs https://tech.playground.style/javascript/next-material-ui/
移し変えるかぁ...面倒だが。
初期設定 https://material-ui.com/getting-started/installation/
Reactコンポーネントで指定できるの思ったより良い感じだな。
Running command: npm run build-functions npm WARN lifecycle The node binary used for scripts is /var/folders/vl/dj884t816mj6ch0bvn80hlsc0000gn/T/yarn--1611412015683-0.5227895432393217/node but npm is using /Users/yosuke/.anyenv/envs/ndenv/versions/v10.16.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
これしてみた
npm config set scripts-prepend-node-path true
Duplicate identifier 'LibraryManagedAttributes'
node_modules/@types/react/index.d.ts:2982:14 - error TS2300: Duplicate identifier 'LibraryManagedAttributes'. 2982 type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T> ~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/@types/react-transition-group/node_modules/@types/react/index.d.ts:2981:14 2981 type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T> ~~~~~~~~~~~~~~~~~~~~~~~~ 'LibraryManagedAttributes' was also declared here.
定義がダブっている模様。package.jsonに次を書き足して再度yarn。
"resolutions": { "@types/react": "^16.13.1" },
デプロイ
(node:32695) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 17) Warning: viewport meta tags should not be used in _document.js's <Head>. https://err.sh/next.js/no-document-viewport-meta
こういうのも出たのでviewportを移動。
まだ半端だけどとりあえず導入はできた。