CRXJS路径含非法字符错误：Chrome扩展启动失败求助

核心问题 #

使用CRXJS + Vite的Chrome扩展React+TypeScript模板时，执行yarn dev启动开发服务器后，触发CRXJS报错，提示路径包含非法字符（路径出现重复拼接）；已切换NVM管理的Node 16环境、移出OneDrive同步目录，问题仍未解决，且相关仓库Issues无对应案例。

排查与修复步骤 #

1. 清理依赖环境并重新安装 #

• 清除yarn缓存：yarn cache clean
• 删除本地依赖目录与锁文件：

  rm -rf node_modules
  rm yarn.lock
  

• 重新安装依赖：yarn install

2. 检查Vite配置中的路径逻辑 #

打开vite.config.ts，重点排查CRXJS插件的路径配置：

• 确认crx插件的contentScripts、background等入口路径，避免出现./src/src/xxx这类重复拼接的错误路径
• 检查自定义的resolve.alias配置，确保别名映射不会导致路径解析异常

3. 重置CRXJS基础配置 #

如果模板自带的CRXJS配置存在冗余，尝试简化为基础配置：

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [
    react(),
    crx({ manifest }),
  ],
})

同时确认manifest.json中所有资源路径为项目根目录的相对路径，无重复前缀。

4. 确保NVM环境的兼容性 #

• 验证Node 16环境的工具版本：

  node -v # 确认输出为v16.x.x
  yarn -v # 推荐使用yarn 1.x版本，Node 16对yarn 2+兼容性有限
  

• 重置NVM的Node 16环境：

  nvm uninstall 16
  nvm install 16
  nvm use 16
  

5. 检查项目路径合法性 #

确保项目所在路径无中文、空格或特殊符号，比如使用纯英文路径/Users/username/projects/chrome-ext-template

内容的提问来源于stack exchange，提问作者Kyle Kingsberry