No mime type for file with extension gifsupported

[prasanthsasikumar]

Hi all,

Newbie here.
I used awake-template(GitHub - danielkellyio/awake-template) to set my site: https://prasanthsasikumar.com/(reverent-brattain-213eac.netlify.app).

I’m trying to get the site to display .gif images with no luck. I specify a gif image in a post like this:
. When building the site, I get the following error:

11:30:27 PM: [error] /2019-research-projects
11:30:27 PM:
11:30:27 PM: Error: Module build failed (from ./node_modules/responsive-loader/lib/index.js):
11:30:27 PM: Error: No mime type for file with extension gifsupported
11:30:27 PM: at Object.loader (/opt/build/repo/node_modules/responsive-loader/lib/index.js:75:29)

I have attached the full log below. Essentially it is saying “no mime type for gif files”. I haven’t got a clue what that means. It would be great if someone could point me in the right direction.

11:29:11 PM: Build ready to start
11:29:13 PM: build-image version: 09c2cdcdf242cf2f57c9ee0fcad9d298fad9ad41
11:29:13 PM: build-image tag: v3.5.0
11:29:13 PM: buildbot version: 172aa31cb336bae73f9eb30159b9f95fe46f2e63
11:29:13 PM: Fetching cached dependencies
11:29:14 PM: Starting to download cache of 351.0MB
11:29:16 PM: Finished downloading cache in 2.40087106s
11:29:16 PM: Starting to extract cache
11:29:26 PM: Finished extracting cache in 10.088905929s
11:29:26 PM: Finished fetching cache in 12.643359877s
11:29:26 PM: Starting to prepare the repo for build
11:29:26 PM: Netlify Large Media is enabled, running git commands with GIT_LFS_SKIP_SMUDGE=1
11:29:26 PM: Preparing Git Reference refs/heads/master
11:29:29 PM: Starting build script
11:29:29 PM: Installing dependencies
11:29:29 PM: Python version set to 2.7
11:29:30 PM: Started restoring cached node version
11:29:33 PM: Finished restoring cached node version
11:29:33 PM: v11.15.0 is already installed.
11:29:34 PM: Now using node v11.15.0 (npm v6.7.0)
11:29:34 PM: Started restoring cached build plugins
11:29:34 PM: Finished restoring cached build plugins
11:29:34 PM: Attempting ruby version 2.6.2, read from environment
11:29:36 PM: Using ruby version 2.6.2
11:29:36 PM: Using PHP version 5.6
11:29:36 PM: Started restoring cached node modules
11:29:36 PM: Finished restoring cached node modules
11:29:36 PM: Started restoring cached go cache
11:29:38 PM: Finished restoring cached go cache
11:29:38 PM: Installing Go version 1.12
11:29:38 PM: unset GOOS;
11:29:38 PM: unset GOARCH;
11:29:38 PM: export GOROOT=‘/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64’;
11:29:38 PM: export PATH=“/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64/bin:${PATH}”;
11:29:38 PM: go version >&2;
11:29:38 PM: export GIMME_ENV=‘/opt/buildhome/.gimme_cache/env/go1.12.linux.amd64.env’;
11:29:38 PM: go version go1.12 linux/amd64
11:29:38 PM: Installing missing commands
11:29:38 PM: Verify run directory
11:29:40 PM: ​
11:29:40 PM: ────────────────────────────────────────────────────────────────
11:29:40 PM: Netlify Build
11:29:40 PM: ────────────────────────────────────────────────────────────────
11:29:40 PM: ​
11:29:40 PM: ❯ Version
11:29:40 PM: @netlify/build 5.3.2
11:29:40 PM: ​
11:29:40 PM: ❯ Flags
11:29:40 PM: deployId: 5fbb8ef79399e500071a3c65
11:29:40 PM: mode: buildbot
11:29:40 PM: ​
11:29:40 PM: ❯ Current directory
11:29:40 PM: /opt/build/repo
11:29:40 PM: ​
11:29:40 PM: ❯ Config file
11:29:40 PM: /opt/build/repo/netlify.toml
11:29:40 PM: ​
11:29:40 PM: ❯ Context
11:29:40 PM: production
11:29:40 PM: ​
11:29:40 PM: ────────────────────────────────────────────────────────────────
11:29:40 PM: 1. build.command from netlify.toml
11:29:40 PM: ────────────────────────────────────────────────────────────────
11:29:40 PM: ​
11:29:40 PM: $ npm run generate
11:29:40 PM: > nuxtlify@1.0.0 generate /opt/build/repo
11:29:40 PM: > npm run before-build && nuxt generate && npm run after-build
11:29:40 PM: > nuxtlify@1.0.0 before-build /opt/build/repo
11:29:40 PM: > node -r esm ./build-tools/beforeBuild.js
11:29:41 PM: 10 posts generated in posts API
11:29:41 PM: 4 categories generated in categories API
11:30:27 PM: [error] /2019-research-projects
11:30:27 PM:
11:30:27 PM: Error: Module build failed (from ./node_modules/responsive-loader/lib/index.js):
11:30:27 PM: Error: No mime type for file with extension gifsupported
11:30:27 PM: at Object.loader (/opt/build/repo/node_modules/responsive-loader/lib/index.js:75:29)
11:30:27 PM: at Object. (webpack/bootstrap:2:0)
11:30:27 PM: at r (webpack/bootstrap:2:0)
11:30:27 PM: at r (webpack/bootstrap:2:0)
11:30:27 PM: at t.forEach.image (pages/_singlePost.vue:4:0)
11:30:27 PM: at Array.forEach ()
11:30:27 PM: at a.useResponsiveImages (pages/_singlePost.vue:4:0)
11:30:27 PM: at a.content (pages/singlePost.vue:4:0)
11:30:27 PM: at a.content (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:29698)
11:30:27 PM: at a..components.Markdown (pages/_singlePost.vue:4:0)
11:30:27 PM: at a.t._render (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:35273)
11:30:27 PM: at /opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70663
11:30:27 PM: at Yi (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:67227)
11:30:27 PM: at io (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70639)
11:30:27 PM: at ro (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70270)
11:30:27 PM: at _t.eo [as renderNode] (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:67517)
11:30:27 PM: at _t.next (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:20536)
11:30:30 PM: > nuxtlify@1.0.0 after-build /opt/build/repo
11:30:30 PM: > node -r esm ./build-tools/afterBuild.js
11:30:31 PM: Netlify admin generated in dist
11:30:31 PM: ​
11:30:31 PM: (build.command completed in 51s)
11:30:31 PM: ​
11:30:31 PM: ────────────────────────────────────────────────────────────────
11:30:31 PM: Netlify Build Complete
11:30:31 PM: ────────────────────────────────────────────────────────────────
11:30:31 PM: ​
11:30:31 PM: (Netlify Build completed in 51.1s)
11:30:31 PM: Caching artifacts
11:30:31 PM: Started saving node modules
11:30:31 PM: Finished saving node modules
11:30:31 PM: Started saving build plugins
11:30:31 PM: Finished saving build plugins
11:30:31 PM: Started saving pip cache
11:30:31 PM: Finished saving pip cache
11:30:31 PM: Started saving emacs cask dependencies
11:30:31 PM: Finished saving emacs cask dependencies
11:30:31 PM: Started saving maven dependencies
11:30:31 PM: Finished saving maven dependencies
11:30:31 PM: Started saving boot dependencies
11:30:31 PM: Finished saving boot dependencies
11:30:31 PM: Started saving go dependencies
11:30:33 PM: Finished saving go dependencies
11:30:33 PM: Build script success
11:30:33 PM: Starting to deploy site from ‘dist’
11:30:33 PM: Creating deploy tree
11:30:33 PM: Creating deploy upload records
11:30:33 PM: 29 new files to upload
11:30:33 PM: 0 new functions to upload
11:30:34 PM: Starting post processing
11:30:34 PM: Post processing - HTML
11:30:36 PM: Post processing - header rules
11:30:36 PM: Post processing - redirect rules
11:30:36 PM: Post processing done
11:30:36 PM: Site is live
11:31:30 PM: Finished processing build request in 2m16.667316924s

[fool]

Hard to say what is happening there, @prasanthsasikumar. Have you tried following our generic build debugging advice? I can’t imagine that build works differently on your machine, for instance?

[Support Guide] Debugging Netlify site builds

Last reviewed by Netlify Support - August, 2023 Note: This article is only about builds within Netlify’s Continuous Integration (CI) environment, as triggered from git commits or from incoming build webhooks. You can learn more in depth about how Netlify builds your site in this article about how our build bots build sites. Some background There are a fair number of reasons that a build could fail in Netlify’s CI environment, even if building works locally. Testing locally is always the place …

If so, that article STILL has good advice for you on making sure we run the same versions of commands that you do

Also - in case the file is in large media which I think you are using due to this logline:

11:29:26 PM: Netlify Large Media is enabled, running git commands with GIT_LFS_SKIP_SMUDGE=1

…then, you don’t have access to the file during build, only its LFS pointer - only after deploy will the file be loadable; during build, you see a pointer to it that you cannot apply image processing to.