An error message "'Office' is not defined no-undef" happens if react-script is newer than 3.0.0

Question

I am creating outlook add-in with react/typescript. When I run my code with npm run start, following message appeared and I was not able to run my react app.

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

Search for the keywords to learn more about each error.

In package.json, if react-script version is newer than 3.0.0, This error happens. If it is lower(e.x. 2.8.8), we can execute the react app without errors. Does anyone give me some workarounds?

Index.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')
  );
});

package.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

One workaround is to just put the comment "/* global Excel, Office */" into the JS/TS/TSX file that it complains about, and things will magically work.

Note: The solution is taken from a comment at https://github.com/OfficeDev/office-js-docs-pr/issues/691. If anyone knowns of a better solution, please share it with the community!