Search code examples
javascriptnode.jswebpackwebpack-2

Webpack dynamic require gives Mixed Content error

I am trying out Webpacks dynamic require which turns whatever I require into a dynamic module and splits off the code.

import(`resources/assets/images/svg/${this.name}.svg`).then((module) => {
    this.svg = module;
}).catch(error => 'An error occured while loading the svg');

The code is then being injected into the page with a script tag when the promise fires. Except the script tag is using http instead of https.

Mixed Content: The page at 'https://test.app' was loaded over HTTPS, but requested an insecure script 'http://test.app/28.js'. This request has been blocked; the content must be served over HTTPS.

How can I make sure that my dynamic require uses https. Is this a setting I can tweak in my webpack configuration?

Update:

It it not an http or https issue rather Webpack create a script tag without a / prefix:

<script type="text/javascript" charset="utf-8" async="" src="22.js"></script>

This results in scripts being resolved to:

mywebpage.app/test/22js

While it actually needs to be:

mywebpage.app/22.js

I don't know to how to solve this though.

Solution

  • Solved by using:

    output: {
    publicPath: '/'
}

    I hope this does not clash with anything else though.