[Support Guide] Troubleshooting your Netlify Large Media Configuration

Hi, @Kato. Normally, I’d ask you to please confirm the site but I only see one site on your team and that site has Large Media enabled so I’m fairly certain I’ve found the site in question.

Looking at that site, I don’t see any of those files in the published deploy. The only files I see are:

/favicon.ico
/index.html
/css/app.2e7b2c15.css
/js/app.274705d5.js
/js/app.274705d5.js.map
/js/chunk-vendors.b305b94a.js
/js/chunk-vendors.b305b94a.js.map

In order for the files to appear in the Large Media tab and to be available for the deployed site, those files must be put somewhere in or under the publish directory (which is dist for this site).

Would you please confirm the images are being moved to that directory before the build is complete?

Thanks! That’s weird, I see the files if I run the same command locally. They are in the folder /img which doesn’t appear on this list.

Hi, @Kato. When you say this:

That’s weird, I see the files if I run the same command locally.

What command are you referring to? I don’t show any command above. The list is coming from a downloaded deploy.

Did you download a deploy and examine it? If so, which deploy was it?

The last deploy of this site which contained a directory “img” was back in 2020.

The key here is that uploading a file to Large Media is not enough to make the file available for the deploy site. For all deploys (both those with and without Large Media) the only files available for the deployed site are those files found in the publish directory or in a subdirectory under that publish directory.

In the case of your site, the image files are not being placed in the publish directory. This is why the files don’t display.

The files being placed in the publish directory is a always hard requirement for the files to be part of the deployed site. There are no exception to that requirement. Using Large Media does not change that requirement.

Your files are missing because you don’t publish them by placing them in the publish directory. Until that is done, your images won’t work. Again, this is always the rule for a files deployed at Netlify with or without Large Media being used.

If there are other questions about this, please let us know.

Hi,

I moved my upload directory to LFS. It seems to work for image files with transformation but files that do not request image with ?nf_resize, do not show up. No idea what I should do?

Cheers
Olaf

Could you point us to the site or the asset URL?

Hi,

I’m building a photographer website for a training project and I use Next.js, Netlify CMS and I want to deploy on Netlify.

I have an issue with a type error during the build phase which I think is linked to Large Media.
I linked my website to Netlify, set up Large Media, configured git lfs as per the documentation, my images on the Git repo have been replaced by text, but I can’t find them on Large Media and when I try to deploy I get this :

10:34:55 PM:   2. Build command from Netlify app                             
10:34:55 PM: ────────────────────────────────────────────────────────────────
10:34:55 PM: ​
10:34:55 PM: $ npm run build-site
10:34:56 PM: > charles-cantin-photographe@1.0.0 build-site
10:34:56 PM: > next build
10:34:56 PM: info  - Linting and checking validity of types...
10:34:57 PM: info  - Creating an optimized production build...
10:34:58 PM: Failed to compile.
10:34:58 PM: 
10:34:58 PM: ./public/images/uploads/baby-juan-encalada-2BalskDOoLg-unsplash.jpg
10:34:58 PM: TypeError: unsupported file type: undefined (file: undefined)
10:34:58 PM:     at lookup (/opt/build/repo/node_modules/next/dist/compiled/image-size/index.js:1:1454)
10:34:58 PM:     at Object.imageSize [as default] (/opt/build/repo/node_modules/next/dist/compiled/image-size/index.js:1:2131)
10:34:58 PM:     at Object.getImageSize (/opt/build/repo/node_modules/next/dist/server/image-optimizer.js:658:56)
10:34:58 PM:     at /opt/build/repo/node_modules/next/dist/build/webpack/loaders/next-image-loader.js:38:85
10:34:58 PM:     at Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/trace/trace.js:79:26)
10:34:58 PM:     at /opt/build/repo/node_modules/next/dist/build/webpack/loaders/next-image-loader.js:38:47
10:34:58 PM:     at Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/trace/trace.js:79:26)
10:34:58 PM:     at Object.nextImageLoader (/opt/build/repo/node_modules/next/dist/build/webpack/loaders/next-image-loader.js:24:28)
10:34:58 PM: Import trace for requested module:
10:34:58 PM: ./public/images/uploads/baby-juan-encalada-2BalskDOoLg-unsplash.jpg
10:34:58 PM: ./public/images/uploads/ sync nonrecursive \.(png%7Cjpe?g)$
10:34:58 PM: ./public/images/uploads/planche-invit.jpg

This happens for the three pictures that I have in the public/images/uploads folder.

Here is my .gitattributes :

*.jpg filter=lfs diff=lfs merge=lfs -text
*.jpeg filter=lfs diff=lfs merge=lfs -text
*.png filter=lfs diff=lfs merge=lfs -text

and the result of git lfs ls-files :

$ git lfs ls-files
addd771254 * public/assets/favicon-appareil-photo.png
299d144686 * public/assets/logo-transparent.png
27f9210dda * public/images/uploads/baby-juan-encalada-2BalskDOoLg-unsplash.jpg
de8362d5db * public/images/uploads/planche-invit.jpg
fc9733490e * public/images/uploads/test.jpg

I’m still quite the noob, I can’t find the reason of this.

EDIT: I tried to disable Next.js image optimization in next.config.js. Now the error message has changed and I see the text version of the images from Git, but I’m still stuck !

12:07:11 AM: Module parse failed: Unexpected token (1:8)
12:07:11 AM: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
12:07:11 AM: > version https://git-lfs.github.com/spec/v1
12:07:11 AM: | oid sha256:fc9733490e05f84274c12473fbc906bcda1f121feb997ce1d6546ec9c7922e6e
12:07:11 AM: | size 15726
12:07:11 AM: Import trace for requested module:
12:07:11 AM: ./public/images/uploads/test.jpg
12:07:11 AM: ./public/images/uploads/ sync nonrecursive \.(png%7Cjpe?g)$
12:07:11 AM: > Build failed because of webpack errors

Hi, @Benido. Next.js is not compatible with Large Media (or vice versa).

This means we will likely want to disable Large Media for this site. If we are going to do so, please read the following before proceeding:

If you have read that, please confirm you have backups of all files and let us know which site to remove Large Media from. To identify the site, you can send us the site subdomain, API ID (the id not the key), or a link to the site (whichever you prefer).

Once we know which site, we’ll reply soon to confirm the add-on has been uninstalled.

If there are questions about any of this, please let us know.

Thanks for the quick answer, I’ve created a new topic on admin

Cheers,

Benido

Hi, I’m having issues with LM on a recent site.

I’ve followed, all the steps and just keep being asked for credentials.

I’ve logged out and back in, restarted my computer, manually installed the credential helper, verified the paths in my zshrc, set lockverify to false, added the credential helper to the local directory as well.

All always asks for credentials when it tries to upload

netlify lm:info
  ✔ Checking Git version [2.38.1]
  ✔ Checking Git LFS version [3.2.0]
  ✔ Checking Git LFS filters
  ✔ Checking Netlify's Git Credentials version [0.1.11]

I’m pulling my hair out…

Hi, @ekwoka. Where are you being asked for credentials? Are you using Git in the shell (AKA the terminal or the command line) or are you using Git in some other way?

For example, maybe you are using the VS Code IDE and you are getting the message there. If so, you need to configure the environment for the IDE to use the same Git configuration. How that is done varies by IDE.

If you get the error in the shell, then would you please run the following command and share the output with us?

GIT_TRACE=true GIT_CURL_VERBOSE=true git lfs push --all origin

You can post that information publicly or you can private message (PM) that to one of our support staff. I’ve confirmed that PMs are enabled for your forum login. Please keep in mind that only one person can see the PM and this will likely mean a slower reply than posting the information publicly. Please feel free to reply to however you prefer though.

Thanks for the quick help Luke,

This happens in the native terminal (this is Mac btw) which is zsh, my preferred terminal Warp which is zsh, the terminal in VScode which is zsh, and also blocks pushing with github desktop (that just hangs since it’s waiting for input so it doesn’t do anything at all).

GIT_TRACE=true GIT_CURL_VERBOSE=true git lfs push --all origin
10:10:29.679927 git.c:750 trace: exec: git-lfs push --all origin
10:10:29.680485 run-command.c:655 trace: run_command: git-lfs push --all origin
10:10:29.688138 trace git-lfs: exec: git 'version'
10:10:29.693850 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'remote'
10:10:29.698680 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'rev-parse' 'HEAD' '--symbolic-full-name' 'HEAD'
10:10:29.702680 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'rev-parse' '--git-dir' '--show-toplevel'
10:10:29.706598 trace git-lfs: exec: git 'config' '--includes' '-l'
10:10:29.710145 trace git-lfs: exec: git 'rev-parse' '--is-bare-repository'
10:10:29.713659 trace git-lfs: exec: git 'config' '--includes' '-l' '-f' '/Users/claire/git/SolidPort/.lfsconfig'
10:10:29.717310 trace git-lfs: Upload refs [] to remote origin
10:10:29.717353 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'show-ref'
10:10:29.721889 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'show-ref'
10:10:29.725564 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'ls-remote' '--heads' '--tags' '-q' 'origin'
10:10:30.514514 trace git-lfs: tq: running as batched queue, batch size of 100
10:10:30.514859 trace git-lfs: run_command: git rev-list --objects --do-walk --stdin --
10:10:30.514872 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'rev-list' '--objects' '--do-walk' '--stdin' '--'
10:10:30.517428 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'cat-file' '--batch-check'
10:10:30.519232 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'rev-parse' '--git-common-dir'
10:10:30.555867 trace git-lfs: tq: sending batch of size 1
10:10:30.556014 trace git-lfs: api: batch 1 files
10:10:30.556120 trace git-lfs: creds: git credential fill ("https", "[bae50d02-4a92-4246-b9e5-60627261104d.netlify.app](http://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app)", "")
10:10:30.556146 trace git-lfs: exec: git 'credential' 'fill'
Enter basic credentials for '[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/)':
Username: ^C

10:10:39.278246 trace git-lfs: credential fill error: `git credential fill` error: signal: interrupt
10:10:39.278233 trace git-lfs: filepathfilter: creating pattern ".git" of type gitignore
10:10:39.278391 trace git-lfs: api error: Git credentials for [https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media) not found:
credential fill errors:
`git credential fill` error: signal: interrupt
10:10:39.278445 trace git-lfs: filepathfilter: creating pattern "**/.git" of type gitignore
batch response: Git credentials for [https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media) not found:
credential fill errors:
`git credential fill` error: signal: interrupt
Uploading LFS objects: 0% (0/1), 0 B | 0 B/s, done.
10:10:39.278649 trace git-lfs: filepathfilter: accepting "tmp"
git config -l | grep netlify
include.path=/Users/name/Library/Preferences/netlify/helper/git-config
credential.helper=netlify
credential.[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider)=generic
lfs.[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.access=basic](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.access=basic)
lfs.[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.locksverify=false](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.locksverify=false)
credential.helper=netlify

Here’s the output to that command and the relevant git config entries.

Hey there, @ekwoka :wave:

Thanks for your patience here-- we haven’t forgotten about you! We will follow up soon with more thoughts and next steps.

Hi, @ekwoka and sorry for the delay. While the git config -l | grep netlify contains some useful information, it is hiding other details. For example, I would need to see every credential.helper link to troubleshoot.

On MacOS there are usually three lines like so:

credential.helper=
credential.helper=netlify
credential.helper=osxkeychain

This might have preceding or following entries as well. Seeing all lines would be helpful.

Also, these links do not appear correct to me:

credential.[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider)=generic
lfs.[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.access=basic](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.access=basic)
lfs.[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.locksverify=false](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.locksverify=false)

The URLs are in markdown format above. The should look like this instead:

lfs.https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.access=basic
lfs.https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.locksverify=false

I don’t know if your gitconfig actually looks like this or is the information was mangled by the forum software. If the raw text has the markdown version, that must be changed.

The logs have the same format:

batch response: Git credentials for [https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media) not found:

This makes me concerned the gitconfig itself contains this invalid format. If so, please convert it to the correct format.

Also, this line is unknown to me:

credential.[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider)=generic

I’ve not see that entry before and I have no entries with generic for my Large Media test site:

$ git config -l | grep generic
$

If you could make the URL changes (from markdown to a normal URL) and send the unredacted/unfiltered git config -l output that will tell us more. (The URL changes alone might be all that is required to resolve this.)

@luke The markdown stuff just came from the reply by email conversion to forum post, since it saw the link it translated it awkwardly.

Here’s the credential list:

credential.helper=osxkeychain
credential.helper=
credential.helper=netlify
credential.helper=
credential.helper=/usr/local/share/gcm-core/git-credential-manager-core
credential.https://dev.azure.com.usehttppath=true
credential.https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider=generic

I hunted down and deleted that =generic entry but the results are the same

I did check and remove the other helper= empty entry and now it’s working.

But upon pushing, it did then remake that =generic entry, not sure why I’ve never had that before and you’ve not had it…

Hi, @ekwoka. Sorry for the delay as I was out of office and thank you for letting us know it is working now.

The information above does reveal an issue and, most likely, what the root cause was. (I know you fixed it but I wanted to clarify for any future readers here.)

I first want to point out the behavior of the following lines which contain only and exactly this:

credential.helper=

The lines where the credential.helper is set to the empty string have the effect of resetting or erasing all precedingcredential.helper entries. It resets the list to empty anytime it occurs.

With that is mind, what follows is an explanation of what the entries do. I’m splitting up the file in the order lines appeared. Below section I’ll explain what the lines above do with a bullet point:

credential.helper=osxkeychain
  • adds the MacOS keychain app for handling authentication credentials
credential.helper=
credential.helper=netlify
  • erases the previous settings and only add Netlify’s Git credential helper
credential.helper=
credential.helper=/usr/local/share/gcm-core/git-credential-manager-core
credential.https://dev.azure.com.usehttppath=true
credential.https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider=generic

This last section is syntax I’m not familiar with but which is almost certainly something specific to the git-credential-manager.

What it appears to me has happened is that the git-credential-manager has overwritten the Netlify Git credential helper settings.

The correct settings would be something similar to this:

credential.helper=
credential.helper=netlify
credential.helper=osxkeychain
credential.helper=/usr/local/share/gcm-core/git-credential-manager-core
credential.https://dev.azure.com.usehttppath=true
credential.https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider=generic
lfs.https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.access=basic
lfs.https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.locksverify=false

When you say you removed the other helper= empty entry, I’m guessing it was the one in the middle. That would likely them make the entries similar (but not identical) to the example above.

Note, the credential.helper=osxkeychain entry may be redundant. My understanding is that it is not required if you only use HTTPS (and not SSH) for remote actions when git-credential-manager is being used. If you use both HTTPS and SSH, then both osxkeychain and git-credential-manager are required.

Thanks again for letting us know it is working now and if there are any other questions, please let us know.

Thanks for this great post. I’m still having trouble getting large media to work on my site. I ran git lfs ls-files and it returned all the files I wish to use LFS on. I have tried netlify lm:info and all looks good, I have also run git lfs push --all origin and the console says that all assets were uploaded. However, those images do not appear in the Netlify UI, nor can I access them on my live site. Any additional help? Happy to run additional cmds and send results via email. FWIW, files on github indicate that they are hosted by LFS.

Hi, @brycekunkel. I’m not sure which site this is about.

I did check the Netlify account associated with the same email address as used for this support team. That account only has one site and Large Media isn’t enabled for it.

Is there some other site? If so, would you please share the site’s API ID with us here?

You can post that information publicly or you can private message (PM) that to one of our support staff. I’ve confirmed that PMs are enabled for your forum login. Please keep in mind that only one person can see the PM and this will likely mean a slower reply than posting the information publicly. Please feel free to reply to however you prefer though.

If there is no other site, the Large Media feature was removed for the site I did find by a member of our support team at your request. If you want to use Large Media for that site, you will need to enable that feature again.

Please note, using Large Media isn’t a requirement when using Git LFS. You can use Git LFS without using the Large Media feature if you want to.

If using Git LFS by itself, please remember to set the GIT_LFS_ENABLED and GIT_LFS_FETCH_INCLUDE environment variables according to your requirements (more details at the end of the section here).

Hi, I have followed all the steps in the docs but when I do git push it asks me for a password and the netlify creds don`t work (my bitbucket creds as well). And I also have this error after running the netlify lm:info command:

I tried to install it using netlify lm:install/netlify lm:setup, but it doesnt work. I also tried to log out from netlify, but it also doesnt allow me to push. Could you please help me? Thanks

Hi, @AnnaR. I’ve escalated this to our developers as I’m also having issues getting this to work on Windows. We will post another follow-up here as soon as we have more information.

Hi @AnnaR ,

Thanks for your patience. Our developers recommend using either powershell or scoop as Git’s credential helper. Could you try installing either of those and let us know if that helps allow you to push? GitHub - netlify/netlify-credential-helper: Git credential helper to use Netlify's API as authentication backend