При попытке отобразить поставщик контекста в React, появляется сообщение об ошибке «Недопустимый тип элемента ...»

Question

Я пытаюсь визуализировать поставщика контекста в React с использованием TypeScript.

Следующий код представляет собой то, чего я пытаюсь достичь очень простым способом.

import * as React from "react";

public render() {
    let ctx = React.createContext("test");
    console.log(ctx.Provider);
    return (
        <ctx.Provider value={"hello world"}>
            <div>
                Hello
            </div>
        </ctx.Provider>);
}

Как только этот метод отображается, появляется это сообщение об ошибке:

Ошибка: недопустимый тип элемента: ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: объект. в инварианте (vendor.js? v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE: 118) at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (vendor.js? v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE: 20273) at ReactCompositeComponentWrapper.performInitialMount (vendor.js? v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE: 29799) at ReactCompositeComponentWrapper.mountComponent (vendor.js? v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE: 29690) в Object.mountComponent (vendor.js? v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE: 12868) at ReactCompositeComponentWrapper.performInitialMount (vendor.js? v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE: 29803) at ReactCompositeComponentWrapper.mountComponent (vendor.js? v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE: 29690) в Object.mountComponent (vendor.js? v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE: 12868) at ReactCompositeComponentWrapper.performInitialMount (vendor.js? v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE: 29803) at ReactCompositeComponentWrapper.mountComponent (vendor.js? v = OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE: 29690)

Я рассмотрел проблему в других подобных вопросах, но все, что я получил в ответ, это обновить пакеты.

Похоже, мои пакеты обновлены до следующих версий:

"@types/node": "10.3.2",
"@types/chart.js": "2.7.18",
"@types/codemirror": "0.0.56",
"@types/history": "4.7.2",
"@types/react": "16.4.7",           // <-------------
"@types/react-dom": "16.0.9",       // <-------------
"@types/react-hot-loader": "3.0.6",
"@types/react-router": "4.4.0",
"@types/react-router-dom": "4.3.1",
"@types/react-virtualized": "9.18.3",
"@types/webpack-env": "1.13.0",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "3.0.0",
"awesome-typescript-loader": "4.0.1",
"chart.js": "2.7.2",
"css-loader": "0.28.4",
"csstype": "2.5.3",
"basscss": "8.0.4",
"colors.css": "3.0.0",
"normalize.css": "8.0.0",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"svg.js": "2.6.5",
"svg.panzoom.js": "1.2.0",
"json-loader": "0.5.4",
"popper.js": "1.0.1",
"react": "16.6.0",                // <-------------
"react-dom": "16.6.0",            // <-------------
"react-hot-loader": "3.1.3",
"react-router-dom": "4.3.1",
"react-virtualized": "9.19.1",
"style-loader": "0.18.2",
"typescript": "3.0.3",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-cli": "^3.0.2",
"webpack-command": "^0.2.0",
"webpack-hot-middleware": "2.18.2"

Кто-нибудь знает, как решить эту проблему?

Answer 1

Я сам нашел решение после нескольких часов поиска.

Решением было удаление папки dist, которая затем была восстановлена ​​и все работало нормально.