🐛

MUI v5 DataGridの使い方　その7～有償版(Pro版)のエラー対応～

2022/03/22に公開

React

mui

tech

前回に続いて、Vite+React+TypeScript 環境で MUI の DataGrid の使い方を、Tips的にまとめていきます。

MUI v5 DataGrid の記事一覧
MUI v5 DataGridの使い方　その1 ～基本の使い方から日本語化まで～
MUI v5 DataGridの使い方　その2 ～クリックできるアイコンセルを表示する～
MUI v5 DataGridの使い方　その3 ～セルの縦線を表示する（不具合対応済み）～
MUI v5 DataGridの使い方　その4 ～列ヘッダ、列の設定～
MUI v5 DataGridの使い方　その5 ～フッター～
MUI v5 DataGridの使い方　その6 ～グリッドのPropsの一覧～
MUI v5 DataGridの使い方　その7～有償版(Pro版)のエラー対応～

今回は有償版の@mui/x-data-grid-proをインストールして、本番用環境用にビルドした際のエラー対応についての記載します。

pro版のインストール

無償版x-data-gridはアンインストールしておきます。

npm un @mui/x-data-grid

つづいて有償版x-data-grid-proをインストールします。

npm install @mui/x-data-grid-pro

2022年3月22日時点でのバージョン
@mui/x-data-grid-pro: v5.6.1

本番環境用ビルドした際のエラー対応

本番環境用ビルドをすると、下記のようなエラーが発生することがあります。

 npm run build

node_modules/@mui/x-data-grid/hooks/features/virtualization/useGridVirtualScroller.d.ts:43:60 - error TS2694: Namespace '"E:/SampleProgram/muigridpro-app/muigridpro-app/node_modules/csstype/index".Property' has no exported member 'AnimationTimeline'.
43	animationTimeline?: import("csstype").Property.AnimationTimeline | undefined;


node_modules/@mui/x-data-grid/hooks/features/virtualization/useGridVirtualScroller.d.ts:118:54 - error TS2694: Namespace '"E:/SampleProgram/muigridpro-app/muigridpro-app/node_modules/csstype/index".Property' has no exported member 'PrintColorAdjust'.
118	colorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;


node_modules/@mui/x-data-grid/hooks/features/virtualization/useGridVirtualScroller.d.ts:178:61 - error TS2694: Namespace '"E:/SampleProgram/muigridpro-app/muigridpro-app/node_modules/csstype/index".Property' has no exported member 'HyphenateCharacter'.
178	hyphenateCharacter?: import("csstype").Property.HyphenateCharacter | undefined;
290	printColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;

node_modules/@mui/x-data-grid/hooks/features/virtualization/useGridVirtualScroller.d.ts:599:67 - error TS2694: Namespace '"E:/SampleProgram/muigridpro-app/muigridpro-app/node_modules/csstype/index".Property' has no exported member 'HyphenateCharacter'.
599	WebkitHyphenateCharacter?: import("csstype").Property.HyphenateCharacter | undefined;

node_modules/@mui/x-data-grid/hooks/features/virtualization/useGridVirtualScroller.d.ts:631:65 - error TS2694: Namespace '"E:/SampleProgram/muigridpro-app/muigridpro-app/node_modules/csstype/index".Property' has no exported member 'PrintColorAdjust'.
631	WebkitPrintColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;

対応方法はコチラに記載があります。

私の場合、「@mui/icons-material」と「@mui/material」のバージョンを上げることで解決しました。
エラーが出ていたバージョン

@mui/icons-material: v5.4.4
@mui/material: v5.4.4

バージョンアップ後(2022年3月22日時点での最新）

@mui/icons-material: v5.5.1
@mui/material: v5.5.2

バージョンアップ後はエラーも発生せずにビルドできました。

ライセンス購入

現在、186$でPro版が購入できます。

Pro版を購入すると、メールでライセンスキーが知らされます。
Reactアプリの App.tsx などで、ライセンスキーを読み込むだけで、ライセンス認証されるようになります。

App.tsx

+ import { LicenseInfo } from '@mui/x-data-grid-pro'
import { MyGrid } from './MyGrid'

export function App() {
+  LicenseInfo.setLicenseKey('メールで送信されたライセンスキー')

  return (
      <MyGrid />
  )
}

pro版のインストール

本番環境用ビルドした際のエラー対応

ライセンス購入

Discussion