React项目如何通过import语法导入使用module.exports的第三方库

ES模块规范的import语法原生兼容CommonJS模块，不需要额外配置loader或者插件，常规导入分两种写法：

• 整体导入：直接使用import 自定义别名 from '包名'，Webpack、Vite、Rollup等常见React项目打包工具会自动将模块通过module.exports导出的整体内容绑定到你定义的别名对象上，直接通过别名调用属性/方法即可，兼容性最好
• 解构导入：对于明确导出了对应属性的CommonJS模块，可以直接在导入时解构import { 方法名 } from '包名'，但部分年代较早的CommonJS模块解构会出现属性为undefined的问题，遇到这类情况换回整体导入再取属性就行。

注意：如果你使用的是Vite搭建的React项目，遇到CommonJS导入异常时，不用手动改配置，Vite内置的依赖预构建会自动处理CommonJS到ESM的转换。

你提到的两个类库的特殊注意事项 #

这两个类库都不能直接在浏览器端运行的React代码中直接引入使用：

• os是Node.js内置的核心模块，依赖Node底层的系统调用API
• systeminformation是专门为Node.js环境开发的系统信息采集库，内部依赖了大量Node专属的内置模块（fs、child_process、os等），浏览器环境不存在这些API，直接引入会直接报运行时错误。

全栈项目（含Node服务端，如Next.js、Remix、前后端分离带独立Node服务）使用方式 #

1. os模块使用
   • 无需单独npm安装，Node运行环境自带
   • 仅能在服务端代码（API路由、Server Component、Node服务层逻辑）中导入：

   // 服务端代码
   import os from 'os'
   // 如果上述写法导入为undefined，换成命名空间导入即可
   // import * as os from 'os'
   
   // 调用示例
   const systemPlatform = os.platform()
   const cpuCoreCount = os.cpus().length
   

2. systeminformation模块使用
   • 先在服务端代码对应的工作目录安装依赖：npm install systeminformation
   • 同样仅在服务端代码中导入：

   // 服务端代码
   import si from 'systeminformation'
   // 导入异常就换成 import * as si from 'systeminformation'
   
   // 调用示例
   const getCpuInfo = async () => {
     const cpuData = await si.cpu()
     return cpuData
   }
   

   如果是Next.js项目，注意用到这两个库的文件不要加'use client'标记，服务端组件/接口路由直接写逻辑即可；如果是客户端组件需要用到相关数据，通过服务端接口请求获取。

纯前端React项目（无Node服务端，代码全部运行在浏览器） #

这两个库都无法直接使用：

• 浏览器出于安全限制，本身不允许网页直接获取底层系统级硬件、操作系统的完整信息
• 如果只需要获取浏览器开放的有限系统信息，可以直接用浏览器原生navigatorAPI，比如navigator.platform获取平台、navigator.hardwareConcurrency获取CPU核心数
• 如果确实需要采集完整的系统级信息，必须额外搭建Node服务端部署这两个库的逻辑，前端通过接口请求拿到服务端返回的采集结果。

常见报错排查 #

• 报错提示fs is not defined、child_process is not defined、os is not defined：原因是把Node专属模块的代码打包到了前端浏览器侧运行，把相关逻辑迁移到Node服务端即可
• 导入后拿到的对象为undefined：优先把默认导入换成命名空间导入写法import * as 别名 from '包名'，同时确认依赖已经正确安装在对应工作目录
• Vite项目导入提示模块不存在：删除node_modules/.vite缓存目录后重启开发服务，让预构建重新处理依赖即可

内容的提问来源于stack exchange，提问作者jaydeep tewary