Strapi 4升级至Strapi 5后执行npm run develop出现JSX语法及依赖解析错误

看起来你在把Strapi 4升级到5之后，遇到了前端构建层面的JSX解析错误、依赖路径问题，还有两个配置类的警告。我来一步步帮你解决这些问题：

先处理配置类警告（非致命但建议修复） #

终端里的两个警告是Strapi 5的新配置要求导致的，先把它们搞定：

1. API_TOKEN_SALT 配置警告：Strapi 5不再直接读取环境变量API_TOKEN_SALT，需要在config/admin.js里显式配置：

// config/admin.js
module.exports = ({ env }) => ({
  // 保留你已有的其他配置
  apiToken: {
    salt: env('API_TOKEN_SALT'), // 确保环境变量中存在该值，无则用下方命令生成
  },
});

2. transfer.token.salt 缺失警告：这个会禁用数据传输功能，同样在config/admin.js补充：

// config/admin.js
module.exports = ({ env }) => ({
  // 保留你已有的其他配置
  transfer: {
    token: {
      salt: env('TRANSFER_TOKEN_SALT'), // 生成随机salt可执行：node -e "console.log(require('crypto').randomBytes(16).toString('base64'))"
    },
  },
});

生成安全salt的话，直接在终端运行上述Node命令就能得到随机值，把它存入你的环境变量即可。

核心问题：JSX语法错误与依赖解析失败 #

这两类问题本质是Strapi 5的前端构建引擎（esbuild）配置和旧插件的代码不兼容导致的，按以下步骤解决：

1. 升级插件到Strapi 5兼容版本 #

你用到的strapi-plugin-redirects、strapi-plugin-permalinks、strapi-plugin-import-export-entries等插件，很多Strapi 4版本在Strapi 5上会因为JSX写法、依赖导入路径的差异报错：

• 打开package.json检查插件版本，去对应插件的npm页面确认是否支持Strapi 5，将插件升级到最新的兼容版本（官方维护的插件通常已发布Strapi 5适配版，版本号可能带v5标识）。

2. 调整Strapi构建配置 #

如果插件已升级但仍报JSX错误，需要手动告诉esbuild把.js文件当作JSX解析，在项目根目录创建或修改config/build.js：

module.exports = ({ env }) => ({
  frontend: {
    builder: 'esbuild',
    esbuild: {
      loader: {
        '.js': 'jsx', // 让esbuild用JSX loader处理.js后缀的文件
      },
    },
  },
});

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

关于@strapi/design-system的导入错误，大概率是依赖版本不匹配或缓存问题，执行以下命令清理后重装：

# 删除依赖包和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 清理Strapi本地缓存
npm run clean
# 重新启动开发服务
npm run develop

按照这个流程操作，应该就能解决你遇到的所有问题了。

备注：内容来源于stack exchange，提问作者Md. Abu Sayed