Next.js Discord

Discord Forum

Loading webpack assets besides images/css

Unanswered
Sloth bear posted this in #help-forum
Open in Discord
Sloth bearOP
I'm trying to add other types of assets to import in my files; But things aren't working out.
  webpack: (config, { dev, isServer }) => {
    config.module.rules.push({
      test: /\.mp4$/,
      type: "asset/resource",
    });
   return config;
  },

Because I found a bug report on vercel/next, I tried:
    config.module.generator["asset/resource"] = config.module.generator["asset"];
    config.module.generator["asset/source"] = config.module.generator["asset"];
    delete config.module.generator["asset"];
    return config;

which didn't do anything.

I also tried:
    config.module.rules.push({
      test: /\.mp4$/,
      type: "asset/resource",
      generator: {
        publicPath: "/_next/",
        outputPath: "../",
      },
    });

Which works, but dumps the videos in my root directory (not in .next/static).

The crazy thing is,
- if I use ./, the files end up in project/.next/server/static
- if I use ../static, the files end up in project/static/static
- if I use ./.next, the files end up in project/.next.next
- if I use ./static, the files end up in project/.next/server/static/static

In other words, ./ seems to correspond to project/.next/server, but ../ seems to correspond to the project root.
I don't seem to be able to output the files in .next/static/media.
I am also not sure if any of this would work at build time

9 Replies

Sloth bearOP
It gets weirder:

Here's my full config:
const nextConfig = {
  publicRuntimeConfig: {
    version: "1.0.0", //TODO: Add git version here automatically
    name: "GDQuest",
    modifiedDate: new Date().toISOString(),
  },
  pageExtensions: ["mdx", "ts", "tsx"],
  // Adds support for importing .mp4 video files
  webpack: (config, { dev, isServer }) => {
    config.module.rules.push({
      test: /\.mp4$/,
      type: "asset/resource",
      generator: {
        filename: `${dev ? "[name][ext]" : "[name][ext]"}`,
        publicPath: `${dev ? "/_next/static/media/" : "/_next/static/media/"}`,
        outputPath: `./static/media/`,
      },
    });
    return config;
  },
};


Using this, some videos are properly copied to .next/static/media, but others are in .next/server/static/media/

I can't seem to make sense of it. The videos that are properly copied are loaded in a page.tsx that is in the app root, whereas the others are from an internal page. I don't know if it's related, but I can't find any other difference
Sloth bearOP
Nope, that's not it, loading a video from the second batch in the first page also fails
I've also tried to move the videos outside of the /app directory, as the ones that work are outside, but no dice
Sloth bearOP
Inspired by https://github.com/vercel/next.js/discussions/27583, I tried moving the file that was loading the videos outside of /app too, but to no avail
Sloth bearOP
Using this worked in both dev and build modes locally:
const nextConfig = {
  ...
    config.module.rules.push({
      test: /\.mp4$/,
      type: "asset/resource",
      generator: {
        publicPath: "/_next/",
        outputPath: "../",
      },
    });
  },
};

... But the videos 404 on Vercel
I give up. This isn't making any sense at all.
Sloth bearOP
This seems to work locally in dev and build too:
  webpack: (config, { dev, isServer }) => {
    config.module.rules.push({
      test: /\.(mp4|webm|mov|ogg|swf|ogv)$/,
      type: "asset/resource",
      generator: {
        publicPath: `/_next/static/videos/`,
        outputPath: `${isServer ? (dev ? "../" : "../../") : ""}static/videos/`,
        filename: "[name]-[hash].[ext]",
      },
    });
    return config;
  },

Hopefully on Vercel too
This is less programming and more like arcane magic. Very frustrating
Sloth bearOP
This seems to work!