src/assets/videos/index.ts

@@ -1 +0,0 @@
-export { default as DemoVideo } from './demo.mp4';

src/components/landing/HeroSection/HeroSection.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import { Box, Heading, Text, Center, VStack, BoxProps } from '@chakra-ui/react';
-import { DemoVideo } from '../../../assets/videos';
 import { DemoVideoPosterImg } from '../../../assets/images';
 import { CtaButton, SiteLogo, PageSection } from '../';
 
@@ -11,7 +10,7 @@ export const HeroSection: FC<HeroSectionProps> = ({ flexShrink }) => {
     <Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
       <Box
         as='video'
-        src={DemoVideo}
+        src={`${__webpack_public_path__}/remote-assets/demo.mp4`}
         poster={DemoVideoPosterImg}
         autoPlay
         loop

types.d.ts

@@ -16,7 +16,4 @@ declare module "*.webp" {
   export = value;
 }
 
-declare module '*.mp4' {
-  const src: string;
-  export default src;
-}
+declare const __webpack_public_path__: string;