[Support Guide] Troubleshooting your Netlify Large Media Configuration

Hi @luke I found a temporary solution for now by hosting the media on S3. I will return to this issue sometime in the future. Thank you for your insight!

I wanted to add to this discussion since I have the same issue as @jaykhan-dev .

Running cmd.exe as an administrator does provide a temporary fix to this problem, as my test was successful.

-Wyatt

Hi, @SirTangent. Thanks for letting us know that workaround worked for you. If you have other questions or comments, please follow-up here anytime.

I skimmed through this thread but didnt seem to see anybody with the same issue.

My images are uploading fine and I see them in under the Large Media tab. The issue i’m running into is that the pointer files arent getting created in github. I have seen a pointer file created but I cant get these pointer files to be created consistently.

I am not sure how it is supposed to work–at what point should these pointer files be created?

github shows image is lfs tracked, but the image is still there instead of the pointer text:

lms

Thanks

Hi, @Coru89. When you use Large Media for a repo/site you are moving the Git LFS service from GitHub to Netlify.

This means that any changes made to files tracked by Git LFS will not be completely tracked at GitHub unless you revert back to using GitHub for the Git LFS service.

The Git repo at GitHub is aware that those files are changing. However, the actual contents of those changes are only happening at Netlify.

There is a quick trick to switch back to GitHub and then back to Netlify for Git LFS service - all without removing the Large Media add-on.

The trick is to remove the file .lfsconfig and then restore it again. That is the file which is redirecting the Git LFS service to Netlify. For example, this should work (all commands are being run in the base directory of the repo):

mv .lfsconfig ..
git lfs push --all origin
mv ../.lfsconfig .

Once all three commands above are run, GitHub should be updated and Large Media will be the Git LFS service again. The first command moves the file up to the parent directory (out of the repo directory) so now the repo will revert to using GitHub for the Git LFS. The second command is a push of the Git LFS files, which now go to GitHub not Netlify. The last command moves the .lfsconfig file back into the repo directory moving the Git LFS service back to Large Media again. The Large Media instance at Netlify doesn’t even know that anything changed.

Note, if you made changes before pushing, they won’t be in Large Media. If that is the case, just run the second command again now that Large Media is in use again files and it will make the updates there as well.

If that doesn’t work or if there are other questions, please let us know.

Hey @luke -Thanks for the response. I was able to get LM working. I am having some performance issues though. I may have to revert to not using LM unless the issue can be resolved. I have a very high TTFB on my images. I made a thread on this: Slow image loading when using Large Media

1 Like

Hi, @Coru89. Thanks for making the new topic and I’ve replied there as well.

@luke Hi, if possible I’d like some help on this same question. I’m trying to upload some jpg images but they’re not appearing on the large media tab. I’ve followed the instructions and afaik all my cli outputs are ok. I’ll list some of them below. The github repo turned the images into pointers and if I run npm run build locally I see the folder img where the images are. However, I downloaded the deploys and this folder is not there. I already tried to force the git lfs push with the images but nothing happens. I have the last push with the tracing enable to send to you if possible. Thanks in advance!

netlify lm:info

  √ Checking Git version [2.31.1.windows.1]
  √ Checking Git LFS version [2.13.3]
  √ Checking Git LFS filters
  √ Checking Netlify's Git Credentials version [0.1.11]

git lfs ls-files

1817fdeeae * src/assets/DSCF1447.jpg
af85bedb29 * src/assets/landing-image.jpg
1faa103af8 * src/assets/myself.jpg

My git-config:

# The first line resets the list of helpers so we can check Netlify's first.
[credential]
  helper = ""

[credential]
  helper = netlify

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.