reactjs - 如果 react-script 比 3.0.0 更新，则会出现错误消息 "' Office' is not defined no-undef"

Question

我正在使用 react/typescript 创建 outlook 插件。当我使用 npm run start 运行我的代码时，出现以下消息，我无法运行我的 React 应用程序。

Failed to compile.
./src/index.tsx
  Line 9:  'Office' is not defined  no-undef

Search for the keywords to learn more about each error.

在package.json中，如果react-script版本高于3.0.0，就会出现这个错误。如果它较低(例如 2.8.8)，我们可以无错误地执行 React 应用程序。有人给我一些解决方法吗？

索引.tsx

import 'react-app-polyfill/ie11';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { AppContainer } from './components';
import { Provider } from 'react-redux';
import { store } from './store/store';

Office.onReady(() => {
  ReactDOM.render(
    <Provider store={store}>
        <AppContainer />
    </Provider>,
    document.getElementById('root')
  );
});

包.json

  "name": "outlookApp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@microsoft/office-js": "^1.1.29",
    "@microsoft/office-js-helpers": "^1.0.2",
    "@types/jest": "24.0.11",
    "@types/node": "11.13.6",
    "@types/react": "16.8.23",
    "@types/react-dom": "16.8.4",
    "office-ui-fabric-react": "^6.190.1",
    "react": "^16.8.6",
    "react-app-polyfill": "^1.0.1",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "typescript": "3.4.4",
    "uuid": "^3.3.2"
  },
  "devDependencies": {
    "@types/gtag.js": "0.0.0",
    "@types/office-js": "1.0.1",
    "@types/react-redux": "^7.1.0",
    "@types/react-router-dom": "^4.3.4",
    "@types/uuid": "^3.4.5",
    "redux-devtools-extension": "^2.13.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "win": "set HTTPS=true&&set BROWSER=none&&react-scripts start",
    "mac": "export HTTPS=true&&export BROWSER=none&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "test-win-ci": "set CI=true&&npm test",
    "test-mac-ci": "CI=true npm test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:7071"
}

Answer 1

一种解决方法是将注释“/* global Excel, Office */”放入它提示的 JS/TS/TSX 文件中，事情就会神奇地起作用。

注意:解决方案取自 https://github.com/OfficeDev/office-js-docs-pr/issues/691 的评论.如果有人知道更好的解决方案，请与社区分享!