react-bootstrapが原因でbuild時にエラーになる

webアプリを作成しているとあるあるなことなのですが、ブラウザ環境で確認した場合はうまくいくのに、実際buildをするとエラーになるということがあります。

今回はそれで結構詰まってしまったので参考までに残します。

何が起こったか

React、next.js、TypeScriptでwebアプリを作成していて、ブラウザ環境（localhost:3000）で確認が完了したのでbuildしようとするとエラーが起きた。

エラー文は下記（一部）

$ npm run build

Failed to compile.

./components/nav.tsx:71:15
Type error: Type '{ children: Element[]; variant: string; title: TFunctionResult; id: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 253 more ... | "key"> & { ...; }, "ref" | ... 250 more ... | "key"> & BsPrefixProps<...> & NavDropdownProps & { ...; }'.
  Property 'variant' does not exist on type 'IntrinsicAttributes & Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 253 more ... | "key"> & { ...; }, "ref" | ... 250 more ... | "key"> & BsPrefixProps<...> & NavDropdownProps & { ...; }'.

  69 |           <Nav>
  70 |             <NavDropdown
> 71 |               variant="success"
     |               ^
info  - Creating an optimized production build .npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Exit status 1
npm ERR! 

なんか色々と出ました。

解決策

今回、上記のエラーを見て、本来はエラーになるはずがないreact-bootstrapの書き方の部分でエラーになっていることがわかります。
このエラーのみを解消しても、他のreact-bootstrapを使った部分でエラーになるので、どうやらこれはreact-bootstrapが原因で起こっているということがわかりました。

そこで公式のgithubを確認するとissue報告されていました。
https://github.com/react-bootstrap/react-bootstrap/issues/5267

どうやら、v1.0.1までは問題なく動くものの、v1.1.0からはエラーとなるようです。

というわけで下記コマンドを実行してあっさりと解決

$ npm add react-bootstrap@1.0.1