MacOS下npm start启动React应用遇Permission denied错误的解决方法

问题原因 #

报错EACCES: permission denied, open '/Users/akashjana/.config/svgrrc'是因为@svgr/webpack处理SVG文件时，尝试读取全局配置文件~/.config/svgrrc但权限不足，或是该文件/目录的所有者并非当前用户。

解决步骤 #

1. 检查并修复配置文件权限 #

先查看文件的权限与所有者信息：

ls -ld ~/.config/svgrrc

若输出显示所有者不是当前用户，执行命令将所有者改为当前用户：

sudo chown $(whoami):$(whoami) ~/.config/svgrrc

再调整文件权限为仅当前用户可读可写：

chmod 600 ~/.config/svgrrc

2. 配置文件不存在则创建 #

如果执行ls命令提示文件不存在，先创建.config目录（若不存在）：

mkdir -p ~/.config

再创建空的svgrrc文件：

touch ~/.config/svgrrc

最后重复步骤1设置正确权限。

3. 用项目本地配置绕过全局文件 #

不想修改全局文件的话，可在项目根目录创建本地配置文件svgr.config.js，内容如下：

export default {};

@svgr会优先读取项目本地配置，不再访问全局的~/.config/svgrrc。

4. 清理缓存并重装依赖 #

若以上方法无效，尝试清理npm缓存并重装依赖：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

之后重新执行npm start启动项目。

内容的提问来源于stack exchange，提问作者Akash Jana