strapi从4.11.5等旧版本升级到4.13以后的最新版报Uncaught TypeError: Failed to construct ‘URL‘: Invalid URL的问题解决

问题描述

我用的是strapi的4.11.5升级到4.13.3后，当点击后台的媒体库时，在chrome等浏览器中报错了：Uncaught TypeError: Failed to construct 'URL': Invalid URL

在Firefox中，则报：TypeError: URL constructor: /uploads/thumbnail_images_7d4ec4cb5f.jpg is not a valid URL.

而且页面空白。

问题解决

查看了strapi的github仓库的issue，发现其实是从4.13.2版本就有这个问题了。

起初我以为是因为我开启了production生产环境导致的（strapi start），其实不是，开发环境(strapi develop)也一样有问题，也不是有没有sharp依赖包的问题。（所以package.json中的sharp依赖包可以删除了）

问题解决貌似有两种方法：

1、删除数据库对应的files表，重建该表

2、修改代码–我用的是这种

找到项目根目录/node_modules/@strapi/plugin-upload/admin/src/utils/appendSearchParamsToUrl.js

//strapi/packages/core/upload/admin/src/utils/appendSearchParamsToUrl.js  
//第13行
const urlObj = new URL(url); 


//修改原因：If url is a relative url, the constructor should be const urlObj = new URL(url, baseUrl) or the constructor will raise the exception.
//将其改为
const baseUrl = "https://your.domain.cn"; //这里替换为你当前的strapi站点域名
const urlObj = new URL(url, baseUrl);

//为什么要这么改，请参考：https://developer.mozilla.org/en-US/docs/Web/API/URL/URL#parameters

修改代码后，需要npm run build，然后再npm run start 或npm run develop

至此，问题已经被临时性的解决了。期待后续官方能升级新的strapi版本能修复该问题，这样就不需要自己修改以上代码了。

如果你在web前端开发、面试、前端学习路线有困难可以加我V：imqdcnn。免费答疑，行业深潜多年的技术牛人帮你解决bug。

祝你能成为一名优秀的WEB前端开发工程师！