Use create-react-app with Office.js

[tong-1324]

I am trying to add Office.js to my react project created by create-react-app, which I believe is the most popular way to start a react project. After I add the CDN link to Office.js and set up the Office.initialize in my project, it keeps failing to compile with an error says "Office is not defined no-undef" and "Excel is not defined no-undef".

After some investigation, I find out the cause is that the default configuration of Eslint in create-react-app does not allow us to use global variable in the react components. Variables like “Office” and “Excel” in office.js are all treated as global variables in react components, so we keep seeing that error. To fix the issue, we need to add “/* global Excel, Office */” at the beginning of the react components files. It allows those components to access global variable. We could also fix the issue by customizing the Eslint config.

I think we could improve our documentation by mentioning the problem above. Create-react-app is a project with 60,000+ stars on GitHub, and I think we should provide some documentation here to help developers using Office.js with that. At least we could mention the problem above in this documentation. It should save a lot of time for other developers who want to build office applications with create-react-app.

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 49ccc61e-06b1-fd30-63a0-625301ea0bc8
• Version Independent ID: 1fdff452-de8f-5b97-9f53-389eb9576b25
• Content: Build an Excel add-in using React - Office Add-ins
• Content Source: docs/quickstarts/excel-quickstart-react.md
• Product: office 365
• GitHub Login: @o365devx
• Microsoft Alias: o365devx

[Rick-Kirkham]

Rather than having devs change their favorite eslint settings, I think it would be better to have them add the special comment to component files. I'll update the instructions for that.

[Rick-Kirkham]

The article is updated in the source. It should be published live in the next day or two.