YSNHatenaBlog

主にアプリやWebサービス開発について

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を移動。

まだ半端だけどとりあえず導入はできた。