What is the process of adding an m4v video to a create-next-app using typescript?

I encountered an issue with the following error:

./components/Hero.tsx:2:0
Module not found: Can't resolve '../media/HeroVideo1-Red-Compressed.m4v'
  1 | import React, { useState } from 'react';
> 2 | import Video from '../media/HeroVideo1-Red-Compressed.m4v';
  3 | import { Button } from './SharedStyles';
  4 | import styled from 'styled-components'
  5 | import { MdKeyboardArrowRight, MdArrowForward } from 'react-icons/md';

Import trace for requested module:
./pages/index.tsx

https://nextjs.org/docs/messages/module-not-found

Thetsconfig.json file includes the following configurations:

  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]

To address this issue, I followed the top answer (by score) on this question, where I added index.d.ts to ./media with the declaration declare module '*.m4v'. Although this resolved the squiggly lines in Hero.tsx, it led to the error mentioned above on the client side.

I also tried the solutions provided in this question, but they did not yield the desired outcome. I am exploring alternatives to placing the video in the public folder. Any suggestions would be greatly appreciated.

typescriptvideonext.js

Answer №1

After tirelessly experimenting with different approaches found in numerous stackoverflow threads, I eventually stumbled upon a solution that actually worked here. I made the following adjustments to nextConfig within next.config.js:

webpack(config, { isServer }) {
    const prefix = config.assetPrefix ?? config.basePath ?? '';
    config.module.rules.push({
      test: /\.mp4$/,
      use: [{
        loader: 'file-loader',
        options: {
          publicPath: `${prefix}/_next/static/media/`,
          outputPath: `${isServer ? '../' : ''}static/media/`,
          name: '[name].[hash].[ext]',
        },
      }],
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Form is causing an error with the Ant Design Switch because of the value

I am creating Ant Design Form.Item dynamically in Next JS and it looks like this: <Form.Item initialValue={initValue} key={property.key} name={property.key} label={property.name}> {component} </Form.Item> When the component is a Switch, it ...

reactjsnext.jsantd

Is there a method to verify the status of an onSnapshot listener?

There have been instances when I've observed that the link between the browser tab and Firestore gets disconnected for unknown reasons, leading to unsuccessful re-connection. Is there a reliable method to determine if your onSnapshot is still activel ...

reactjsgoogle-cloud-firestorenext.js

Leveraging string interpolation in Typescript with a string sourced from a file

After diving into Typescript, I came across some intriguing information on template strings. One question that popped into my mind is whether these template strings can be utilized when reading a string from a file, just like this: let xmlPayloadTemplate ...

node.jstypescript

Unable to include query parameters in the nextjs dynamic route

I have a file called [slug].js. What I am attempting to do is add a query parameter to this dynamic route. Here's the code: await router.replace({ pathname: `${router.pathname}`, query: { coupon }, }, undefined, ...

javascriptreactjsnext.js

Assistance with the Chakra UI Range Slider in React

I could use some help figuring out where exactly to implement my OnChange and Map functions for mapping JSON data into a Range Slider. Everything seems to be rendering correctly, but I keep encountering an error when I try to move the slider: Unhandled Ru ...

javascriptreactjsnext.jsrangeslider

Encountering errors in Typescript build due to issues in the node_modules directory

While running a typescript build, I encountered errors in the node_modules folder. Despite having it listed in the exclude section of my tsconfig.json file, the errors persist. What's puzzling is that another project with identical gulpfile.js, tsconf ...

typescriptnpmgulptscgulp-typescript

Is there a way for me to access the names of the controls in my form directly from the .html file?

I have a list where I am storing the names of my form controls. In order to validate these form controls, I need to combine their names with my code in the HTML file. How can I achieve this? Below is my code: .ts file this.form = this.formBuilder.group({ ...

angulartypescript

Familial Connection (TYPESCRIPT)

Is there a way to set the state in ISetOpen based on the type of modal in ISetOpen? For example: If ISetOpen.modal is 'payModal': Set ISetOpen.state to IPayModal If ISetOpen.modal is 'deleteModal': Set ISetOpen.state to IDeleteModal ...

reactjstypescripttypesreact-redux

Angular v15 Footer Component Table

In my Angular 15 project, I am attempting to correctly position and utilize the mat table with the following code snippet: <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>. While the displayedColumns property is functionin ...

angulartypescriptfrontenddocumentation

Is it possible to effectively interpret raw data from an ionic Bluetooth module?

I am currently facing an issue where I am trying to read raw data from a device using Ionic Bluetooth Serial. The device sends 506 bytes per transmission to the app and waits for a response of "OK" before sending the next 506 bytes. However, there are ins ...

angulartypescriptcordovaionic-frameworkbluetooth

A TypeScript class transferring data to a different class

I have a set of class values that I need to store in another class. function retainValues(data1,data2){ this.first = data1; this.second = data2; } I am looking for a way to save these class values in a different class like this -> let other = N ...

javascriptarraystypescriptclass

Building better interfaces with Next.js, Styleguidist, and Fela for React applications

Has anyone successfully set up next.js with Fela and Styleguidist? I'm having trouble linking the Next.js webpack configuration to Styleguidist as mentioned in this article: I've been using this example app: https://github.com/zeit/next.js/tree ...

javascriptreactjsnext.jsreact-styleguidist

Issue with Next.js useRouter() returning undefined value in useEffect()

I am facing an issue where I am trying to access the useRouter() variable inside useEffect() but keep getting an undefined error in the console. My goal is to fetch data from an API based on the slug. import { useRouter } from 'next/router'; ...

reactjsnext.js

Dynamic Route Matching in NextJS Middleware

Currently, I am in the process of developing a website that incorporates subdomains. Each subdomain is linked to a file-based page using middleware. Take a look at how the subdomains are being mapped to specific pages: app.com corresponds to /home app.com ...

javascripttypescriptnext.js

Using TypeScript to define data types for Supabase payloads

Currently, I'm working on integrating supabase into my ReactJS Typescript project. However, I'm unsure about the data type of the channel payload response and I aim to extract the eventType along with the new data. const handleInserts = () => ...

reactjstypescriptdatabasereal-timesupabase

Encountered a hiccup when attempting to include the DatePicker component in app.module.ts using

I'm encountering an issue with some providers in my app.module.ts file. Specifically, when trying to use the DatePicker component, I'm getting this error message: Type 'DatePickerOriginal' is not assignable to type 'Provider'. ...

angulartypescriptcordovaionic-framework

Encountering issues with upgrading Vue.js 2.5.2 with TypeScript

I am currently in the process of updating vue js to version 2.5.2 along with typescript 2.5.3. Below is my index.ts file: import Vue from 'vue' var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' ...

typescriptvue.jsvuejs2

Creating a JSON file using an object to send requests in Angular

In my Angular 7 project, I am trying to send a multipart request to the server that includes a file (document_example.pdf) and a json file containing a data object (data_object_example.json). The content of data_object_example.json is as follows: { " ...

javascripthtmljsonangulartypescript

What are the steps for creating a custom repository with TypeORM (MongoDB) in NestJS?

One query that arises is regarding the @EntityRepository decorator becoming deprecated in typeorm@^0.3.6. What is now the recommended or TypeScript-friendly approach to creating a custom repository for an entity in NestJS? Previously, a custom repository w ...

typescriptmongodbnestjstypeorm

What is the best way to employ the pick function with optional types within nested TypeScript structures?

I am interested in learning TypeScript. dynamicContent?: { data?: { attributes?: { baccarat?: { title?: string | null; content?: string | null } | null; baccaratOnline?: { title?: string | null; content?: string | null } | null; ...

typescript