Компонент React, связанный как UMD, не может загрузить зависимость при импорте с помощью тега script в другое приложение реагирования - PullRequest
Новая
       93

Компонент React, связанный как UMD, не может загрузить зависимость при импорте с помощью тега script в другое приложение реагирования

1 голос
/ 30 апреля 2020

Я создал простой компонент реакции и хочу условно импортировать его в другое приложение реакции. Мне удалось импортировать его с помощью тега сценария HTML, а затем получить его из переменной window . Вся идея работала до тех пор, пока в модуле была включена реакция. Я хочу использовать экземпляр внешнего реагирования из родительского приложения, поэтому я настроил веб-пакет следующим образом: 

const path = require('path');
module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'module.js',
        library: 'test',
        libraryTarget: 'umd',
    },
    externals: {
        'react': {
            'commonjs': 'react',
            'commonjs2': 'react',
            'amd': 'react',
            'root': 'React'
        }
    }
};

edit: Я изменил внешние элементы - { react: 'React' }, а в родительском приложении я назначил реакцию для переменной window.React. 

const Test = (window as any).test.default
console.log(window.React)
console.log(Test)
return <Test />

Приведенный выше код приводит к той же ошибке. 

{Children: {…}, Fragment: Symbol(react.fragment), Profiler: Symbol(react.profiler), Component: ƒ, PureComponent: ƒ, …}

ƒ (){return o.default.createElement("p",{style:{color:"green",fontWeight:"bold"}},"Hello, I come from an external module!")}

module.js:1 Uncaught TypeError: Cannot read property 'createElement' of undefined

решено!
Я обнаружил, что экземпляр React должен быть доступен в переменной window.React в момент загрузки сценария UMD. Сначала мне удалось запустить его, загрузив React из CDN перед загрузкой скрипта. Наконец, я решил загрузить внешний компонент динамически, убедившись, что window.React доступно. Работает как положено.

1 Ответ

0 голосов
/ 30 апреля 2020

Сконфигурируйте ваш объект externals следующим образом:

externals: {реаги: 'React'},

Это не будет включать в себя React в вашем комплекте. Убедитесь, что приложение, в которое вы будете включать этот пакет, экспортирует React в свой объект окна. Обычно в любом реактивном проекте экземпляр React доступен в самом окне.

...