Cannot read property 'createElement' of undefined
TypeScript 環境で置きている場合、tsconfig.json
のesModuleInterop
が未設定または、false
設定の時に、
import React from 'react';
のように読み込んでると起こります。esModuleInterop
がオフの場合以下のように読み込むのが正解です。
import * as React from 'react';
React は UMD で定義されていてその中身は、
module.exports = {
createElement: /* ... */,
/* ... */,
}
のようだと定義されてます。これでesModuleInterop
をオンにすると、この中身がすべてdefault
からも強制的にエクスポートされるようになります。
module.exports = {
default: {
createElement: /* ... */,
/* ... */,
},
createElement: /* ... */,
/* ... */,
}
import <name> from <module>
の<name>
はdefault
を見てるので、esModuleInterop
がオフの場合はこれが無くエラーとなるのだと思います。