Browser not displaying MP4 @webpack-dev-server @React.js @JS

Question

I started a new React.js project in Visual Studio Pro 22 without CRA. My react component renders accurately (minus a local .mp4 file). The .mp4 file is contained inside a video element, inside a div, within my main component. Edge developer tools shows the video element, and the .mp4 file (bundled by webpack). However, the .mp4 file will not play or show in the browser. I get this error. localhost/:1

   GET http://localhost:8080/preview net::ERR_ABORTED 404 (Not Found)

Here is my webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
},
    resolve: {
        modules: [path.join(__dirname, 'src'), 'node_modules'],
        alias: { react: path.join(__dirname, 'node_modules', 'react') }
    },
    plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
    module: {
        rules: [
            {
                test: /\.css/i,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:
                {
                 loader: "babel-loader",
                 options:
                    {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            },
            {
                test: /\.(png|mp4)$/i,
                type: "asset/resource"
            },
            {
                test: /\.txt$/i,
                type: 'asset/source'
            },
            {
                test: /\.(woff|woff2|ttf)$/i,
                type: "asset/resource"
            },
            {
                test: /\.html$/,
                use: ["html-loader"]
            }

          ]
       }
   }

here is my package.json

{
  "name": "tascticnodes",
  "version": "0.0.0",
  "description": "tascticnodes",
  "main": "index.js",
  "author": "",
  "presets": 
  [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "scripts": 
  {
  "build": "webpack --watch",
  "start": "webpack serve"
  },
  "keywords": [],
  "license": "ISC",
  "devDependencies": 
  {
   "@babel/core": "^7.16.5",
   "@babel/preset-env": "^7.16.5",
   "@babel/preset-react": "^7.16.5",
   "babel-loader": "^8.2.3",
   "css-loader": "^6.5.1",
   "file-loader": "^6.2.0",
   "html-loader": "^3.1.0",
   "html-webpack-plugin": "^5.5.0",
   "style-loader": "^3.3.1",
   "webpack": "^5.65.0",
   "webpack-cli": "^4.9.1",
   "webpack-dev-server": "^4.6.0"
  },
  "dependencies": 
  {
   "@aws-amplify/ui-react": "^2.1.5",
   "aws-amplify": "^4.3.11",
   "bootstrap": "^5.1.3",
   "react": "^17.0.2",
   "react-bootstrap": "^2.0.4",
   "react-dom": "^17.0.2",
   "typewriter-effect": "^2.18.2"
 }
}

here is my config.babelrc

{
  "presets": ["@babel/preset-env, "@babel/preset-react"]
}

here is my SRC directory screen shot of my directory

here is my passIt.js(the standard app.js)

import React from 'react';
import Typewriter from 'typewriter-effect';
import './index.css';
import Amplify from 'aws-amplify';
import { API } from 'aws-amplify';
import { Button, Form } from 'react-bootstrap';
import preview from './preview.mp4';
import awsExports from './aws-exports';
Amplify.configure(awsExports);


async function addContact() 
{
  const data = 
              {
               body: 
                    {
                     name: formState.name,
                     email: formState.email,
                     message: formState.message
                    }
              }
  console.log(data);

  const apiData = await API.post('formapi', '/items', data);
  console.log({ apiData });
  alert('Mail sent');
};

const formState = { name: '', email: '', message: '' };

function updateFormState(key, value) 
{
  formState[key] = value;
};

const Hello = () => {
    return (
        <div>
            <div>
                <div>
                    <form>
                        <Typewriter
                            onInit={(typewriter) =>
                            typewriter
                            .typeString('Welcome to Anvil')
                            .start()} />
                    </form>
                    <Form>
                        <Form.Group>
                            <Form.Label>Name</Form.Label>
                            <Form.Control placeholder="Name" onChange={e => 
                                             updateFormState('name', e.target.value)} />
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>Email</Form.Label>
                            <Form.Control placeholder="Email" onChange={e => 
                                            updateFormState('email', e.target.value)} />
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>Message</Form.Label>
                            <Form.Control placeholder="Message" onChange={e => 
                                          updateFormState('message', e.target.value)} />
                        </Form.Group>
                        <Button onClick={addContact}>Send a message</Button>
                    </Form>
                </div>
            </div>

            <video autoPlay muted loop>
                <source src="preview" type="video/mp4" />
            </video>

        </div>
    )
};



export default Hello;

here is my index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Check my divs</title>
        <link href="index.css" rel="stylesheet" type="text/css">
        <link C:\Users\zack\source\repos\tascticnodes\src\preview.mp4 />
    </head>
  <body id="body">
    <div id="root"></div>
  </body>
</html>

here is my index.js

import React from 'react';
import { render } from 'react-dom';
import Hello from './passIt';

render(<Hello />, document.getElementById('root'));

Dobromir Kirov · Accepted Answer · 2022-01-14 08:04:57Z

1

Specify output file name in webpack.config.js

View the Wepback Documentation: file-loader
Here is what your loader should look like:

`

{
  test: /\.(mov|mp4)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]'
      }  
    }
  ]
}

`

Take a look at this thread:
Webpack 3 locates .mp4 file but video is not playable

answered Jan 14, 2022 at 8:04

Dobromir Kirov

1,0611 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ziggy Over a year ago

The issue was, webpack was expecting an object belonging to a placeholder. Hence webpack did not know what to do with the file type. I installed file loader as a dev dependency and added your code to my webpack.config.js. The mp4 acts as expected.

Collectives™ on Stack Overflow

Browser not displaying MP4 @webpack-dev-server @React.js @JS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related