my Gatsby build isn't rendering gifs

[supnim]

Summary

Hello, I come asking for help – I've spent a whole day trying to figure it out now. I can't seem to figure out how to get gifs to load on my site. (I'm pretty new to coding so forgive me if this something obvious)

location: src/page/volvic

bring them in like so: import volvic from "../../content/assets/projects/volic.gif"

and call it like so: <img src={volvic} />

gives me this error: (terminal)

ERROR #98123 WEBPAC
Generating development JavaScript bundle failed
Unexpected character '' (1:6)
File: content/assets/projects/volvic.gif:1:6

––––– (localhost) ./content/assets/projects/volvic.gif 1:6Module parse failed: Unexpected character '' (1:6)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(Source code omitted for this binary file)

Can someone point me the right direction please, any help would be greatly appreciated.

Environment (if relevant)

https://github.com/supnim/new-port - repo OS: macOS 10.16 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Shell: 5.8 - /bin/zsh Binaries: Node: 14.4.0 - /usr/local/bin/node npm: 6.14.5 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 81.0.4044.138 Safari: 14.0 npmPackages: gatsby: ^2.23.4 => 2.23.4 gatsby-image: ^2.4.12 => 2.4.12 gatsby-plugin-feed: ^2.5.5 => 2.5.5 gatsby-plugin-google-analytics: ^2.3.4 => 2.3.4 gatsby-plugin-manifest: ^2.4.11 => 2.4.11 gatsby-plugin-netlify: ^2.3.5 => 2.3.5 gatsby-plugin-offline: ^2.1.0 => 2.2.10 gatsby-plugin-postcss: ^2.3.4 => 2.3.4 gatsby-plugin-purgecss: ^3.1.1 => 3.1.1 gatsby-plugin-react-helmet: ^3.3.4 => 3.3.4 gatsby-plugin-react-svg: ^3.0.0 => 3.0.0 gatsby-plugin-sass: ^2.3.4 => 2.3.4 gatsby-plugin-sharp: ^2.6.17 => 2.6.17 gatsby-plugin-smoothscroll: ^1.1.0 => 1.1.0 gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4 gatsby-remark-copy-linked-files: ^2.3.10 => 2.3.10 gatsby-remark-embed-video: ^2.0.1 => 2.0.1 gatsby-remark-images: ^2.0.6 => 2.0.6 gatsby-remark-prismjs: ^3.5.4 => 3.5.4 gatsby-remark-responsive-iframe: ^2.4.5 => 2.4.5 gatsby-remark-smartypants: ^2.3.4 => 2.3.4 gatsby-source-filesystem: ^2.3.11 => 2.3.11 gatsby-transformer-remark: ^2.8.16 => 2.8.16 gatsby-transformer-sharp: ^2.5.10 => 2.5.10 npmGlobalPackages: gatsby-cli: 2.12.58

File contents (if changed)

gatsby-config.js:

const siteConfig = require("./siteConfig");

//ive just added this
module.exports = {
  module: {
    rules: [
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          "file-loader",
          {
            loader: "image-webpack-loader",
            options: {
              bypassOnDebug: true, // webpack@1.x
              disable: true // webpack@2.x and newer
            }
          }
        ]
      }
    ]
  }
};
module.exports = {
  siteMetadata: {
    title: siteConfig.name,
    author: siteConfig.author,
    description: siteConfig.description,
    siteUrl: urljoin(siteConfig.url, siteConfig.prefix),
    social: {
      twitter: siteConfig.twitter
    }
  },

  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets/photography`,
        name: `photography`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets/heros`,
        name: `heros`
      }
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1360,
              withWebp: true,
              showCaptions: true,
              quality: 75,
              wrapperStyle: `margin: 7vw 0;`
            }
          },
          {
            resolve: "gatsby-remark-embed-video",
            options: {
              width: 800,
              height: 450,
              related: false,
              noIframeBorder: true,
              allowfullscreen: true
            }
          },

          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`
            }
          },
          {
            resolve: `gatsby-transformer-remark`,
            options: {
              plugins: [`gatsby-remark-responsive-iframe`]
            }
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`
        ]
      }
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-remark-embed-video`,
    `gatsby-remark-responsive-iframe`,
    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [
          require("postcss-easy-import")(),
          require("postcss-custom-properties")({ preserve: false }),
          require("postcss-color-function")(),
          require("autoprefixer")({ browsers: ["last 2 versions"] })
        ]
      }
    },
    {
      resolve: `gatsby-plugin-purgecss`,
      options: {
        printRejected: true // Print removed selectors and processed file names
        // develop: true, // Enable while using `gatsby develop`
        // tailwind: true, // Enable tailwindcss support
        // whitelist: ['whitelist'], // Don't remove this selector
        // ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
        // purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
      }
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: `-`
      }
    },
    `gatsby-plugin-feed`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: siteConfig.name,
        short_name: siteConfig.shortName,
        start_url: siteConfig.prefix,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `content/assets/sup.png`
      }
    },
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /assets/ // See below to configure properly
        }
      }
    },
    `gatsby-plugin-netlify`,
    `gatsby-plugin-offline`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-smoothscroll`
  ]
};

package.json:

  "name": "supnim.com",
  "private": true,
  "description": "Product designer based in London",
  "version": "1.0.0",
  "author": "Nimesh Reghunandanan <hello@supnim.com>",
  "bugs": {
    "url": "https://github.com/ImedAdel/gatsby-london/issues"
  },
  "dependencies": {
    "acorn": "^7.3.1",
    "acorn-dynamic-import": "^4.0.0",
    "core-js": "^3.6.5",
    "framer": "^1.2.3",
    "framer-motion": "^1.11.1",
    "gatsby": "^2.23.4",
    "gatsby-image": "^2.4.12",
    "gatsby-plugin-feed": "^2.5.5",
    "gatsby-plugin-google-analytics": "^2.3.4",
    "gatsby-plugin-manifest": "^2.4.11",
    "gatsby-plugin-netlify": "^2.3.5",
    "gatsby-plugin-offline": "^2.1.0",
    "gatsby-plugin-postcss": "^2.3.4",
    "gatsby-plugin-purgecss": "^3.1.1",
    "gatsby-plugin-react-helmet": "^3.3.4",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-sass": "^2.3.4",
    "gatsby-plugin-sharp": "^2.6.17",
    "gatsby-plugin-smoothscroll": "^1.1.0",
    "gatsby-plugin-web-font-loader": "^1.0.4",
    "gatsby-remark-copy-linked-files": "^2.3.10",
    "gatsby-remark-embed-video": "^2.0.1",
    "gatsby-remark-images": "^2.0.6",
    "gatsby-remark-prismjs": "^3.5.4",
    "gatsby-remark-responsive-iframe": "^2.4.5",
    "gatsby-remark-smartypants": "^2.3.4",
    "gatsby-source-filesystem": "^2.3.11",
    "gatsby-transformer-remark": "^2.8.16",
    "gatsby-transformer-sharp": "^2.5.10",
    "jshint": "^2.11.1",
    "motion": "^5.0.0-beta26",
    "node-sass": "^4.14.1",
    "open": "^7.0.4",
    "path": "^0.12.7",
    "prismjs": "^1.20.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^5.2.1",
    "react-icons": "^3.10.0",
    "react-images": "^1.1.7",
    "react-photo-gallery": "^8.0.0",
    "react-refresh": "^0.8.3",
    "sharp": "^0.25.4",
    "stream": "0.0.2",
    "tsutils": "^3.17.1",
    "typescript": "^3.9.5",
    "url-join": "^4.0.0",
    "url-loader": "^4.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^9.8.4",
    "file-loader": "^6.0.0",
    "husky": "^2.2.0",
    "image-webpack-loader": "^6.0.0",
    "postcss-color-function": "^4.1.0",
    "postcss-custom-properties": "^8.0.10",
    "postcss-easy-import": "^3.0.0",
    "prettier": "^1.19.1",
    "pretty-quick": "^1.10.0"
  },
  "homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
  "keywords": [
    "gatsby",
    "ghost",
    "gallery",
    "blog",
    "starter"
  ],
  "license": "MIT",
  "main": "n/a",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ImedAdel/gatsby-london.git"
  },
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}```

Once again any help would be highly appreciated :)

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[supnim]

@LekoArts Thanks for getting back, ill try and set this up ASAP - much appreciate you looking into this for me. Link to follow, soon :)

[supnim]

@LekoArts here is the minimal repo, hope this helps

https://github.com/supnim/new-port-minimal

[LekoArts]

Thank you for opening this!

I figured out what your issue is however in the future I would appreciate if you followed our instructions for providing the minimal reproduction in more detail :) The project you showed was quite huge to download and had a lot of things going on. It's better to go from a hello-world project like e.g. https://codesandbox.io/s/gatsby-gif-xt9ok

Your problem is the wrong usage of gatsby-plugin-react-svg. In that part https://github.com/jacobmischka/gatsby-plugin-react-svg#configuration it says:

svg-react-loader will use them and url-loader will be re-enabled with the inverse.

So once you e.g. move your .gif out from the content/assets directory into src/components it works because then the plugin isn't messing with the url-loader which is responsible for loading the files.

I also saw it working after removing gatsby-plugin-react-svg completely (and temporarily replacing the svg imports with placeholders).

You should place your svg files into a single directory and strictly point gatsby-plugin-react-svg to that.

---

On a side note: You shouldn't use the gif you were trying to use. It's 36MB big. Use a video instead ;)

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

[supnim]

@LekoArts thanks you sooooo much, truly appreciate it. Sorry about the bad repo, my bad. once again thanks, brother! all the best :)