Я получаю следующую ошибку:
./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
мой файл tsconfig.json
имеет следующее:
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
Я попытался адаптировать лучший ответ (по количеству баллов) на этот вопрос, добавив index.d.ts
к ./media
с объявлением declare module '*.m4v'
, и это помогло избавиться от волнистых линий в Hero.tsx
, но затем вызвало ошибку выше на стороне клиента.
Я также пробовал оба ответа на этот вопрос, и это тоже не помогло. Я стараюсь не помещать видео в папку public
. У кого-нибудь есть идеи?
После нескольких дней пробных решений из других вопросов о стеке, я наконец нашел то, что сработало здесь. Я добавил следующее к nextConfig
в 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]',
},
}],
});