Parsing of the module has failed due to the presence of an unexpected character '' while attempting to import a video file

Trying to create a video player in NextJS using TS. I brought in a video file from my src/assets folder and encountered an error.

Error - ./src/assets/video.mp4 Module parse failed: Unexpected character '' (1:0) 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)

After some research, I discovered that the issue lies with webpack. Some solutions on Stack Overflow suggest adding a custom.d.ts file to the project with the following:

declare module "*.mp4" {
  const src: string;
  export default src;
}

This seems to resolve the error when importing video files, but now I'm facing a compile time error. Another solution involves adding loaders to webpack.config.js. However, which webpack.config.js file do I modify? The only one I can find is in my node_modules folder, specifically in boxicon. Altering these settings without much experience could potentially lead to major issues. Is there a safer way to address this problem?

typescriptwebpacknext.js

Answer №1

Just a heads up for anyone reading this in the future, there was no need for a webpack config file to resolve an issue with the video src syntax. I encountered the same problem and found the solution after some trial and error.

Here's an example:

// Assuming the file is located under /public
<Video h={"500px"} w={"900px"} link={"/egfile.mp4"}></Video>

Component file Video.tsx

type Props = {
  h: string,
  w: string,
  showControls?: boolean,
  notSupportedMessage?: string,
  link: string,
  filetype: "video/mp4" | ""
}
export const Video = ({
    h,
    w,
    showControls = true,
    notSupportedMessage = "Your browser does not support the video tag.",
    link,
    filetype = "video/mp4",
}: Props) => {
  return (
    <video 
      style={Style.video}
      height={h} 
      width={w} 
      controls={showControls}>
      <source src={link} type={filetype}></source>
      <span>{notSupportedMessage}</span>
    </video>
  );
};

The issue arises when trying to use an import statement similar to what we do for images:

import egfile from "@/public/egfile.mp4"

Instead of that, simply provide the string directly - in Next.js, the root string "/" corresponds to /public.

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

I am facing difficulties in adding dynamic content to my JSON file

I've encountered a challenge in appending new dynamic data to a JSON file. In my project, I receive the projectName from an input form on the /new page. My API utilizes node.js's fs module to generate a new JSON file, where I can subsequently add ...

javascriptnode.jsreactjsjsonnext.js

What is the method for adding local images to FormData in Expo version 48 and above?

When working with Expo v47 and its corresponding React Native and TypeScript versions, FormData.append had the following typing: FormData.append(name: string, value: any): void An example of appending images using this code could be: const image = { uri ...

typescriptreact-nativeexpo

Interface displaying auto-detected car types

I have a setup that looks like this: interface ValueAccessor<T> { property: keyof T; getPropertyValue: (value: any) => value; } I am trying to figure out how to define the correct type and replace the any when I want to provide a custom ...

typescript

Setting up roles and permissions for the admin user in Strapi v4 during the bootstrap process

This project is built using Typescript. To streamline the development process, all data needs to be bootstrapped in advance so that new team members working on the project do not have to manually insert data into the strapi admin panel. While inserting ne ...

node.jstypescriptstrapi

The parameter type 'Object' cannot be assigned to the parameter type 'string'

Everything seems to be working fine in my application, but I am encountering the following error message: The argument of type 'Object' is causing an issue and cannot be assigned to a parameter of type 'string' Here is the code snip ...

angulartypescriptangular7

Guide to establishing intricate conditions for TypeORM insertion

When attempting to insert data based on a specific condition, such as if shopId = "shopA", I want to include the shopdetail. In order to achieve this, I have implemented the following business logic, which is somewhat complex. Is there a more ef ...

javascripttypescripttypeorm

The code snippet for the React TypeScript Cheatsheet in the Portal sample appears to be malfunction

I have implemented a strict version of TypeScript and ESLint in my project. The code for this portal was originally sourced from the documentation available here: After making some modifications, the code now looks like this: import React, { useEffect, u ...

javascriptreactjstypescript

Despite the error message stating that it cannot find module 'angular2/core', the application is still functioning properly

Imagine you have an Angular2 application with a file named app.component.ts that contains some import statements: import {Component} from 'angular2/core'; import {FiltersService} from "./services/filters-service"; import {SearchPipe} from "./ ...

angulartypescript

Angular 2 Custom Pipe Magic

I'm brand new to using the Angular 2 framework and I'm attempting to create a custom filter. app.component.ts import {Component} from 'angular2/core'; import {HTTP_PROVIDERS} from 'angular2/http'; @Component({ selector: ...

angulartypescript

13 upcoming issues with server components related to cookies

My code involves retrieving cookies from the user on the front end, verifying it against a backend token stored in a database, and controlling access to certain pages based on this validation. If the "token" cookie is present, the user is allowed access, o ...

next.jscookiesjwtclientreact-server-components

User's information will only be updated once the page is refreshed

I am encountering an issue with displaying two ul elements based on user login status. When I log in, the first ul is shown immediately, but the second ul is only displayed after a page refresh. Initially, the value in "accountService.currentUser" is null ...

htmlangulartypescript

A guide on leveraging console.log in Next.js

I'm having trouble displaying the output of an API call using console.log. The issue is that nothing appears in the console (both in the browser and Visual Studio Code). The only console.log that seems to work is within the RouteStatus function, but i ...

javascriptnext.jsconsole.log

Creating an object with mapped properties from enumeration values using Typescript

I am trying to find a way to automatically create an object with values computed during compilation using enumeration values and pre-defined function calls. The basic concept is to associate certain arguments of a function with keys. For example, consider ...

typescript

ReactJS does not display pagination numbers

I am facing an issue with setting up pagination for a blog I am building using reactjs, graphql, and nextjs. While the react hooks are functioning properly, the page numbers are not showing up on the screen. I have checked the code multiple times but canno ...

reactjsnext.jsgraphqlpaginationtailwind-css

Trigger the Angular Dragula DropModel Event exclusively from left to right direction

In my application, I have set up two columns using dragula where I can easily drag and drop elements. <div class="taskboard-cards" [dragula]='"task-group"' [(dragulaModel)]="format"> <div class="tas ...

angulartypescriptdrag-and-dropdragulang2-dragula

Interactive feature on Google Maps information window allowing navigation to page's functions

Working on an Angular2 / Ionic 2 mobile App, I am utilizing the google maps JS API to display markers on a map. Upon clicking a marker, an information window pops up containing text and a button that triggers a function when clicked. If this function simpl ...

javascriptangulartypescriptgoogle-maps-api-3

The getAuth() helper found in the api directory's Clerk retrieves the following data: { userId: null }

I'm completely stuck here.. Currently working with the clerk and I am looking to access the userId of the current user using the getAuth() helper. For more information, refer to the docs: pages/api/example.ts import { getAuth } from "@clerk/n ...

typescriptauthenticationnext.jsclerk

How can you obtain the userID in the Next.js 13 application directory on the server side using next-auth?

Currently, my setup includes: nextJS: 13.1.6 nextAuth 4.19.2 The application is utilizing the new app/ directory, currently in its Beta stage. An issue I am facing involves retrieving user information on a page and performing logic based on that ...

next.jsnext-auth

Creating a Robust Next.js Build with Tailor-Made Server (Nest.js)

I'm in need of assistance with compiling/building my project using Next.js while utilizing a custom server. Currently, I have integrated Nest.js (a TypeScript Node.js Framework) as the backend and nested Next.js within it. The integration seems to be ...

javascriptreactjstypescriptnext.jsnestjs

having trouble retrieving information from mongodb

Currently working with nestjs and trying to retrieve data from a collection based on the 'name' value. However, the output I am getting looks like this: https://i.stack.imgur.com/q5Vow.png Here is the service code: async findByName(name):Promi ...

mongodbtypescriptpostmannestjs