Gatsby website Build works in local but fails on Netlify because of video import

Support
,
1

using gatsby 5
netlify deployment message (I’ve shortened the message)

4:01:03 PM: $ gatsby build
4:01:19 PM: success write out requires - 0.006s
4:01:24 PM: failed Building production JavaScript and CSS bundles - 4.848s
4:01:24 PM: error Generating JavaScript bundles failed
4:01:24 PM: Can’t resolve ‘./…/video/wow-studio-hd.mp4’ in ‘/opt/build/repo/src/pages’
4:01:24 PM: If you’re trying to use a package make sure that ‘./…/video/wow-studio-hd.mp4’ is installed. If you’re trying to use a local file make sure that the path is correct.
4:01:24 PM: “build.command” failed ────────────────────────────────────────────────────────────────
4:01:24 PM: Error message
4:01:24 PM: Command failed with exit code 1: gatsby build (Search results for '"non-zero exit code: 1"' - Netlify Support Forums)
4:01:24 PM: Error location
4:01:24 PM: In Build command from Netlify app:
4:01:24 PM: gatsby build
4:01:24 PM: ​
4:01:24 PM: Resolved config
4:01:24 PM: build:
4:01:24 PM: command: gatsby build
4:01:24 PM: commandOrigin: ui
4:01:24 PM: publish: /opt/build/repo/public
4:01:24 PM: publishOrigin: ui
4:01:25 PM: Failed during stage ‘building site’: Build script returned non-zero exit code: 2 (Search results for '"non-zero exit code: 2"' - Netlify Support Forums)
4:01:24 PM: plugins:
4:01:24 PM: - inputs: {}
4:01:24 PM: origin: ui
4:01:24 PM: package: ‘@netlify/plugin-gatsby’
4:01:24 PM: redirects:
4:01:25 PM: - from: /api/* status: 200 to: /.netlify/functions/__apiCaching artifacts
4:01:25 PM: Started saving node modules
4:01:25 PM: Finished saving node modules
4:01:25 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
4:01:25 PM: Failing build: Failed to build site
4:01:25 PM: Finished processing build request in 41.29s`

the page where I am importing the video:

import React from "react"
import type { PageProps } from "gatsby"
import videoHDmp4 from "./../video/wow-studio-hd.mp4";
import Layout from "../components/Layout"

const IndexPage: React.FC<PageProps> = ({data}: any) => {

    return (
        <Layout>
            <video poster="/bg-texture-min.webp" controls={false} preload="auto" muted={true} autoPlay={true} loop={true} style={{width: "100%", height: "100%"}}>
                <source src={videoHDmp4} type="video/mp4"/>
                <source src="/wow-studio-hd.ogg" type="video/ogg"/>
            </video>
        </Layout>
    )
}

export default IndexPage;

folder structure:
>public
>src
   >pages
         >index.tsx
   >video
       myVideo
>static
    >video
        >myVideo

type or paste code here

this is my first question so any feedback is appreciated
2

Try:

3

thank you for the reply

I found the issue .mp4 was in my .gitignore file therefore netlify was not able to locate the video file

4

that’s awesome thanks for sharing your solution!