Path of dynamic chunks is relative

The chunks resulting from a dynamic import are incorrectly loaded into the page. Their path is relative to the page thus causing 404 errors. To solve this I try to set the publicPath in Webpack config as suggested in https://github.com/webpack/webpack/issues/7968

    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: "/",
        filename: "[name].[contenthash].js",
    },

Unfortunately that raises a Django SuspiciousFileOperation:

The joined path (/main.9ce82b7ec94c17ac77f9.css) is located outside of the base path component

[kierandarcy]

Thank you for the update @bluesurfer your solution fixed my issue too. Also, thank you @knokit - I made a small update and I now no longer need my custom loader.

I just needed to update my WebpackManifestPlugin like this

new WebpackManifestPlugin({ publicPath: "" })

[bluesurfer]

My previous comment was too overkill 😃

In my case, I finally solved this issue with the following settings:

Webpack configuration

    ....
    output: {
          path: path.resolve(__dirname, "dist"),
          publicPath: "/static/",
          filename: "[name].[contenthash].js",
      },
    ....
    plugins: [
        new WebpackManifestPlugin({
            publicPath: ""
        }),
    ],

Django settings

STATIC_URL = "/static/"
STATICFILES_DIRS = [str(ROOT_DIR / "dist")]

So to me this issue is closed… I’ll let the maintainer @shonin to consider closing this.