Zenn
Open8

Deno + React で Material UI を使いたい

React
Deno
あきもあきも

React や React Router は esm.sh からインポートしたら普通に動いた（まだ複雑なことは試してないけど）
MUI か RMWC を使いたいんだけど上手くいかない
Skypack やその他 CDN も試したけどだめっぽかった

あきもあきも

キャッシュ消したり色々試してたら React でも普通にエラー出たわ
まずはこっちを解決しなきゃ

エラー
error: TS2305 [ERROR]: Module '"deno:///missing_dependency.d.ts"' has no exported member 'Interaction'.
import { Interaction as SchedulerInteraction } from 'https://cdn.esm.sh@types/scheduler@0.16.2/tracing.d.ts';
         ~~~~~~~~~~~
    at https://cdn.esm.sh/v73/@types/react@17.0.42/index.d.ts:44:10

TS2503 [ERROR]: Cannot find namespace 'PropTypes'.
    type Validator<T> = PropTypes.Validator<T>;
                        ~~~~~~~~~
    at https://cdn.esm.sh/v73/@types/react@17.0.42/index.d.ts:2953:25

TS2503 [ERROR]: Cannot find namespace 'PropTypes'.
    type Requireable<T> = PropTypes.Requireable<T>;
                          ~~~~~~~~~
    at https://cdn.esm.sh/v73/@types/react@17.0.42/index.d.ts:2955:27

TS2503 [ERROR]: Cannot find namespace 'PropTypes'.
    type ValidationMap<T> = PropTypes.ValidationMap<T>;
                            ~~~~~~~~~
    at https://cdn.esm.sh/v73/@types/react@17.0.42/index.d.ts:2957:29

TS2503 [ERROR]: Cannot find namespace 'PropTypes'.
    ? Defaultize<MergePropTypes<P, PropTypes.InferProps<T>>, D>
                                   ~~~~~~~~~
    at https://cdn.esm.sh/v73/@types/react@17.0.42/index.d.ts:3073:36

TS2503 [ERROR]: Cannot find namespace 'PropTypes'.
        ? MergePropTypes<P, PropTypes.InferProps<T>>
                            ~~~~~~~~~
    at https://cdn.esm.sh/v73/@types/react@17.0.42/index.d.ts:3075:29

Found 6 errors.

esm.sh のリンクがおかしくてインポートできていないエラーと PropTypes が見つからないエラー

前者は同じようなのが既に報告されてた

後者は何でだろうと思ったけど、実際に見てみたら同じ理由だった

index.d.ts
import * as PropTypes from 'https://cdn.esm.sh@types/prop-types@15.7.4/index.d.ts';
あきもあきも

力技になるけど import map で壊れた URL を上書きして解決

import_map.json
{
  "imports": {
    "https://cdn.esm.sh@types/": "https://cdn.esm.sh/v73/@types/"
  }
}
あきもあきも

MUI がなぜ使えないのか調べる

エラー
error: TS2305 [ERROR]: Module '"deno:///missing_dependency.d.ts"' has no exported member 'Instance'.
import { Instance, VirtualElement, Options, OptionsGeneric } from '@popperjs/core';
         ~~~~~~~~
    at https://cdn.esm.sh/v73/@mui/base@5.0.0-alpha.73/PopperUnstyled/PopperUnstyled.d.ts:2:10

TS2305 [ERROR]: Module '"deno:///missing_dependency.d.ts"' has no exported member 'VirtualElement'.
import { Instance, VirtualElement, Options, OptionsGeneric } from '@popperjs/core';
                   ~~~~~~~~~~~~~~
    at https://cdn.esm.sh/v73/@mui/base@5.0.0-alpha.73/PopperUnstyled/PopperUnstyled.d.ts:2:20

TS2305 [ERROR]: Module '"deno:///missing_dependency.d.ts"' has no exported member 'Options'.
import { Instance, VirtualElement, Options, OptionsGeneric } from '@popperjs/core';
                                   ~~~~~~~
    at https://cdn.esm.sh/v73/@mui/base@5.0.0-alpha.73/PopperUnstyled/PopperUnstyled.d.ts:2:36

TS2305 [ERROR]: Module '"deno:///missing_dependency.d.ts"' has no exported member 'OptionsGeneric'.
import { Instance, VirtualElement, Options, OptionsGeneric } from '@popperjs/core';
                                            ~~~~~~~~~~~~~~
    at https://cdn.esm.sh/v73/@mui/base@5.0.0-alpha.73/PopperUnstyled/PopperUnstyled.d.ts:2:45

Found 4 errors.

@popperjs/core が見つからないらしいので import map に追加してみたが特に変わらなかった

エラー
error: TS2305 [ERROR]: Module '"https://esm.sh/@popperjs/core@v2.11.4?target=es2021"' has no exported member 'Instance'.
import { Instance, VirtualElement, Options, OptionsGeneric } from '@popperjs/core';
         ~~~~~~~~
    at https://cdn.esm.sh/v73/@mui/base@5.0.0-alpha.73/PopperUnstyled/PopperUnstyled.d.ts:2:10

TS2305 [ERROR]: Module '"https://esm.sh/@popperjs/core@v2.11.4?target=es2021"' has no exported member 'VirtualElement'.
import { Instance, VirtualElement, Options, OptionsGeneric } from '@popperjs/core';
                   ~~~~~~~~~~~~~~
    at https://cdn.esm.sh/v73/@mui/base@5.0.0-alpha.73/PopperUnstyled/PopperUnstyled.d.ts:2:20

TS2305 [ERROR]: Module '"https://esm.sh/@popperjs/core@v2.11.4?target=es2021"' has no exported member 'Options'.
import { Instance, VirtualElement, Options, OptionsGeneric } from '@popperjs/core';
                                   ~~~~~~~
    at https://cdn.esm.sh/v73/@mui/base@5.0.0-alpha.73/PopperUnstyled/PopperUnstyled.d.ts:2:36

TS2305 [ERROR]: Module '"https://esm.sh/@popperjs/core@v2.11.4?target=es2021"' has no exported member 'OptionsGeneric'.
import { Instance, VirtualElement, Options, OptionsGeneric } from '@popperjs/core';
                                            ~~~~~~~~~~~~~~
    at https://cdn.esm.sh/v73/@mui/base@5.0.0-alpha.73/PopperUnstyled/PopperUnstyled.d.ts:2:45

Found 4 errors.

調べたら popperjs から floating-ui に変わったっぽいけど関係あるんだろうか
VirtualElement は見つけられたけど他のは無さそうだからそのまま置き換えるのは難しい

あきもあきも

上記の問題はこちらの issue を参考に解決できた。

で、バンドルもできたが実際には動かない

Uncaught ReferenceError: useInsertionEffect is not defined
あきもあきも

多分 MUI の内部で使われてる emotion 関連なんだけど、似たような issue は既に直ってるらしい。

あきもあきも

RMWC は特にエラーを出さずにバンドルできるがブラウザではエラーが出て何も表示されない

Uncaught ReferenceError: focusTrap is not defined

なぜバンドル時にはエラーが出ないのかが謎