I am using NextJS and on my website I have some webm, mp4 files and I want to display it. Somehow everytime I try to build or start next dev, I get this error. I tried to use withVideos, webpack4, file-loader, url-loader, nothing is working as expected.
info - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
info - Creating an optimized production build
Failed to compile.
./assets/media/video/feature1.webm
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)
> Build error occurred
Error: > Build failed because of webpack errors
at /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/build/index.js:17:924
at async Span.traceAsyncFn (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/telemetry/trace/trace.js:6:584)
error Command failed with exit code 1.
my next.config.js
const nextConfig = {
future: {
webpack5: true,
},
// distDir: "./dist/functions/next",
webpack: (config, { isServer, webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
config.plugins.push(new webpack.EnvironmentPlugin(process.env));
config.optimization.minimize = false;
config.module.rules.push(
{
test: /\.svg$/,
issuer: {
test: /\.(js|ts)x?$/,
},
use: ["@svgr/webpack"],
},
{
test: /\.(mp4|webm|ogg|swf|ogv)$/,
use: [
{
loader: "file-loader",
options: {
publicPath: `./.next/static/videos/`,
outputPath: `${isServer ? "../" : ""}static/videos/`,
name: "[name]-[hash].[ext]",
},
},
],
}
);
// Important: return the modified config
return config;
},
};
module.exports = withPlugins(
[
withImages({
webpack(config, options) {
return config;
},
}),
],
nextConfig
);
publicfolder and serve them as static assets instead? Would avoid having to mess around with webpack to load video files. – Zayin