React项目导入@microsoft/office-js失败，如何解决？

1. 先修复导入语句的语法错误 #

你的导入代码存在明显语法问题——缺少闭合的单引号，正确写法应为：

import * as Office from '@microsoft/office-js';

2. 理解@microsoft/office-js的特殊定位 #

@microsoft/office-js并非常规前端npm包，它主要为Office插件场景设计，官方更推荐通过CDN引入而非npm安装后导入：
在项目的public/index.html中添加CDN脚本：

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

添加后无需再写import语句，直接在代码中使用全局的Office对象即可。

3. 若坚持使用npm包的配置方案 #

如果一定要通过npm导入，需注意该包的npm发布版可能缺少正确的入口配置，导致webpack无法识别。可通过以下方式处理：

• 若项目已eject，修改webpack.config.js的resolve配置，添加别名指定入口文件：

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      '@microsoft/office-js': '@microsoft/office-js/dist/office.js'
    }
  }
}

• 若使用create-react-app未eject，可借助craco等工具修改webpack配置，步骤同上。

4. 清除依赖缓存重试 #

若以上步骤无效，可能是依赖缓存问题，执行以下命令重置依赖：

rm -rf node_modules
rm package-lock.json
npm install

重启开发服务器后再尝试导入。

内容的提问来源于stack exchange，提问作者lofi vern