1

In my Nuxt app I'm loading a video of the .webm format which works as expected. As a fallback for Safari I would like to load a .mov formatted video:

<video>
  <!-- Safari -->
  <source src="~/assets/videos/video.mov" type="video/mov" />
  <!-- other browsers -->
  <source src="~/assets/videos/video.webm" type="video/webm" />
</video>

However, it seems that this format is not supported with the default webpack config, this is what I get:

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)

The question is how should a loader for this specific file type (mov) configured?
I couldn't find anything helpful in the mentioned link, nor on the web in general.

Please check this CodeSandbox to see a reproduction of this issue.

Any help will be appreciated.

Shaya Ulman
  • 1,299
  • 1
  • 12
  • 24
  • Did you looked how to have a specific loader for Webpack? There are some tutorials here and there. – kissu Oct 27 '21 at 14:20
  • Did you manage to solve the problem? If you did let me know how, please. – Eduardo Dec 13 '21 at 14:49
  • @Eduardo, I ended up using the mov formatted videos with a `.mp4` extension seems to work . – Shaya Ulman Dec 13 '21 at 19:57
  • If you don't mind please upvote the question, so it should get some attention. – Shaya Ulman Dec 13 '21 at 19:57
  • @kissu, see please my comment one before the previous one, I was referring to Eduardo – Shaya Ulman Dec 14 '21 at 03:57
  • Shaya Ulman, thanks for answering! But that option does not work for me because I need exactly ```.mov``` container due to its transparency support. – Eduardo Dec 14 '21 at 06:32
  • The problem is solved. That's how my ```build``` section of ```nuxt.config.js``` looks like: ```build: { extend (config) { config.module.rules.push({ test: /\.(mov)$/i, loader: 'file-loader', options: { name: '[path][name].[ext]', esModule: false } }) } }``` I know that the code looks ugly in comments but hope that would help someone. – Eduardo Dec 14 '21 at 07:15
  • @Eduardo post it as an answer. – kissu Dec 14 '21 at 07:48

1 Answers1

2

Had the same problem. All we need is to extend webpack's config. That's how my build section of nuxt.config.js looks like:

build: {
  extend (config) {
    config.module.rules.push({
      test: /\.(mov)$/i,
      loader: 'file-loader',
      options: {
        name: '[path][name].[ext]',
        esModule: false
      }
    })
  }   
}
kissu
  • 40,416
  • 14
  • 65
  • 133
Eduardo
  • 1,086
  • 5
  • 19