Блог

После размещения приложения на онлайн-веб-сервере React больше не распознается. Локально все работает нормально.

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

Шаг 1 — Создайте приложение:
mkdir reacttest
cd reacttest
yo office
выберите проект надстройки Office, используя React framework,
назовите его ReactTest
выберите Outlook в качестве клиента office,
позвольте ему выполнять свою работу, исправьте аудит npm на
cd ReactTest
,
измените манифест, заполнив значение по умолчанию SupportUrl

Шаг 2 — протестируйте приложение
npm запускает
надстройку sideload, загружая манифест в Outlook,
нажмите кнопку
, если все в порядке, вы должны увидеть экран приветствия.

Шаг 3 — Сборка
npm run build

Шаг 4 — Загрузка и тестирование
загрузите содержимое папки dist в место на онлайн-веб-сервере,
заменяющее https://localhost:3000 в манифесте по местоположению на веб-сервере
загрузить надстройку, загрузив обновленный манифест в Outlook,
нажмите кнопку
, на боковой панели ничего не отображается

Шаг 5 — Проверьте в Outlook debugger
щелкните правой кнопкой мыши боковую панель и покажите инспектор элементов,
проверьте консоль на наличие ошибки,
она показывает 3 ошибки, самая большая из которых, по-видимому, заключается в том, что React неизвестен и вызывает неработоспособность надстройки?

 [Error] ReferenceError: Can't find variable: React
    react (vendor.297c97ec99bb1c2af14d.js:16:1502)
    o (vendor.297c97ec99bb1c2af14d.js:1:159)
    (anonieme functie) (vendor.297c97ec99bb1c2af14d.js:16:1336)
    o (vendor.297c97ec99bb1c2af14d.js:1:159)
    (anonieme functie) (vendor.297c97ec99bb1c2af14d.js:1:949)
    Globale code (vendor.297c97ec99bb1c2af14d.js:1:957)

[Error] ReferenceError: Can't find variable: React
    react (app.297c97ec99bb1c2af14d.js:23:8683)
    o (app.297c97ec99bb1c2af14d.js:1:159)
    ./index.tsx (app.297c97ec99bb1c2af14d.js:23:7746)
    o (app.297c97ec99bb1c2af14d.js:1:159)
    (anonieme functie) (app.297c97ec99bb1c2af14d.js:23:8631)
    o (app.297c97ec99bb1c2af14d.js:1:159)
    (anonieme functie) (app.297c97ec99bb1c2af14d.js:1:949)
    Globale code (app.297c97ec99bb1c2af14d.js:1:957)

[Error] Error: Office.js has not fully loaded. Your app must call "Office.onReady()" as part of it's loading sequence (or set the "Office.initialize" function). If your app has this functionality, try reloading this page.
    (anonieme functie) (office.debug.js:1643:263)
    validateFunction (office.debug.js:287)
  

Это зависимости в package.json (используемые в рабочей среде, если я правильно понимаю)

 "dependencies": {
    "@microsoft/office-js-helpers": "^1.0.2",
    "core-js": "^2.6.1",
    "office-ui-fabric-react": "^6.138.1",
    "react": "^16.8.1",
    "react-dom": "^16.8.1"
},
  

react и react-dom явно присутствуют

Я ожидаю, что приложение будет запущено на нашем веб-сервере и что react доступен и работает.

Это потому, что конфигурация webpack для производственной сборки помечает React и ReactDOM как внешние. Вы можете либо загрузить их явно с помощью ссылок на сценарии на HTML-странице, либо перейти к /config/webpack.prod.js и удалите раздел externals:

   externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    },
  

Выполнение последнего приведет к тому, что webpack загрузит React в пакет.