Unable to load resources via file-loader

[Qrysto]

I'm trying to use an svg file and an mp4 file using file loader as follow:

var bg = require('./bg.mp4');
...
<video className="home-bgVideo-video" autoPlay loop 
    <source src={bg} type="video/mp4" />
</video>

var svgFile = require('./icons.svg');
...
<svg {...others} className={cx('svgIcon', className)} dangerouslySetInnerHTML={{ __html: ['<use xlink:href="', svgFile, '#icon-', this.props.icon, '" />'].join('') }} />

but both fail. The video is not played (though the mp4 file request in Chrome's Network tab return code 200 OK and no error in the console), and the svg is not displayed (there's an error in the console: Unsafe attempt to load URL http://localhost:2992/_assets/fa87dfdfe18be5a7343deca35c9473bc.svg from frame with URL http://localhost:8080/. Domains, protocols and ports must match.)

When opening those urls in other tabs, it's perfectly loaded. I guess this is a cross-origin request problem, but adding

devServer {
    headers: {'Access-Control-Allow-Origin': '*'}
}

to the config doesn't fix the problem. Any solution?

[hew]

I'm having a similar issue. I just want to load an .mp4.

Webpack creates the vid, but it's not playable. Any help appreciated.

[alex-cory]

Did any of you ever figure this out? I posted a question about this on StackOverflow.

[hew]

Not really. But there are workarounds. You can just straight-up copy the file to wherever with the webpack copy plugin. See the bottom of this webpack config:

https://github.com/hew/hew.github.io/blob/dev/webpack.config.js