Media Library URL Error

System Information
  • Strapi Version: 4.13.3
  • Operating System: Windows/Ubuntu
  • Database: SQLite
  • Node Version: 18.6.1
  • NPM Version: 9.7.2
  • Yarn Version: -

When trying to enter “Media Library” i get an error in console

Uncaught TypeError: Failed to construct 'URL': Invalid URL

URL:

http://localhost:1337/admin/plugins/upload?sort=createdAt:DESC&page=1&pageSize=10)

I tried to rollback to older versions of strapi, but it did not help, I also tried to remove different plugins and that did not help either.

1 Like

Yes Same Issue Here:
Strapi: 4.14.0-alpha.0
OS: Windows
Database: Mysql
Node: v18.16.1
npm: 9.5.1

I can’t upload and see Media Library Page on Strapi Admin (Crash) white blank
any solution?
Thanks

1 Like

I have the same error. Please help!!. Thanks
strapi: 4.13.6
OS: linux Red Hat 8
Database: Postgres
node: 18.17.1
npm: 9.6.7
error

I faced the same problem. To fix I found two solutions :

  • set STRAPI_ADMIN_BACKEND_URL to the URL of your strapi instance. It seems that it should be done at build time
  • use the following patch package
diff --git a/node_modules/@strapi/plugin-upload/admin/src/utils/appendSearchParamsToUrl.js b/node_modules/@strapi/plugin-upload/admin/src/utils/appendSearchParamsToUrl.js
index 730ba50..142f333 100644
--- a/node_modules/@strapi/plugin-upload/admin/src/utils/appendSearchParamsToUrl.js
+++ b/node_modules/@strapi/plugin-upload/admin/src/utils/appendSearchParamsToUrl.js
@@ -10,7 +10,7 @@ const appendSearchParamsToUrl = ({ url, params }) => {
     return url;
   }
 
-  const urlObj = new URL(url, window.strapi.backendURL ?? window.location.origin);
+  const urlObj = new URL(url, window.strapi.backendURL || window.location.origin);
 
   Object.entries(params).forEach(([key, value]) => {
     if (value !== undefined) {

Are you saying either solution will work, or are both required?

Where is STRAPI_ADMIN_BACKEND_URL set?

Either solution will work.

STRAPI_ADMIN_BACKEND_URL Is an environnement variable that should be set at build time

That worked, thank you!

I’ve definitely run into this problem now that I understand what was happening better. This issue we have is that we build the container on a CI for use in different environments so the base url changes (testing, preproduction, etc.).

So we’ve been building it with a relative URL for the server url config (which apparently is supported according to the docs), then setting the url on launch to be the correct base URL for the environment. ie. we build with “/cms”, then launch with (https://testing…/cms). Our server config looks like this:

 url: env("CLIENT_URL", "") + "/cms",

I can confirm that if the CLIENT_URL is set during build everything works as expected.

This used to work as of 4.12.7, but has since broken in 4.13 and above. It’s also more likely to break if there is anything in the media library, and is running in production mode. So something has changed between these two versions.

Update, just to add a bit more context to this. This change is the one that broke this behaviour fix: set a fallback where we define `window.strapi.backendURL` · strapi/strapi@4d92b11 · GitHub

Which means that patching appendSearchParamsToUrl.js as described by Matthieu_Bouxin above will solve this for you.

1 Like