CSS sourceMappingURL is wrong in "productionBrowserSourceMaps: true" mode

What version of Next.js are you using?

10.2.3

What version of Node.js are you using?

12.22.1

What browser are you using?

Chrome

What operating system are you using?

Linux

How are you deploying your application?

next start

Describe the Bug

When I enabled sourceMaps in prod mode:

// next.config.js
module.exports = {
  productionBrowserSourceMaps: true,
}

css sourcemaps are broken, because all CSS code is fetch by XHR and inserted to page by <style> tag with wring relative sourceMappingURL path.

Example: Page got this css https://some.app/_next/static/css/02de173fd9311ea5fb00.css with /*# sourceMappingURL=02de173fd9311ea5fb00.css.map*/ inside but next.js add this css code manually to header like here as a result browser try to get sourcemap here: https://some.app/doc/02de173fd9311ea5fb00.css.map instead of correct path here https://some.app/_next/static/css/02de173fd9311ea5fb00.css.map.

Expected Behavior

Trying to get sourcemap by correct path: https://some.app/_next/static/css/02de173fd9311ea5fb00.css.map

To Reproduce

1. Build any project with css with productionBrowserSourceMaps: true option
2. Start builded project
3. Open page in Chrome with DevTools

[Js-Brecht]

Idk how much it helps, but these source map errors were pretty annoying to me. As a workaround until this issue is fixed, I wrote a simple webpack plugin that rewrites the sourceMappingURL to an absolute path

Definitely don’t need to use the done hook to do this. If you used emit, you wouldn’t have to read the content of the disk. I use done because I have other hooks running during emit that don’t like the absolute source map location, and then another done hook that needs to run before I finally update the source map path.

Plugin

// UpdateCssSourceMaps.js
const fs = require("fs-extra");
const path = require("path");
const pluginName = "UpdateCssSourceMaps";

class UpdateCssSourceMaps {
    constructor(nextConfig = {}) {
        const { assetPrefix = "" } = nextConfig;
        this.publicPath = `${assetPrefix}${assetPrefix.endsWith("/") ? "" : "/"}_next/static/css`;
    }

    apply(compiler) {
        let outputPath = "";
        const outputFilesystem = compiler.outputFileSystem;

        compiler.hooks.emit.tap(pluginName, (compilation) => {
            outputPath = compilation.getPath(compiler.outputPath, {});
        });

        compiler.hooks.done.tapPromise(pluginName, (stats) => {
            const assets = stats.compilation.assets;
            const processAssets = Object.keys(assets).reduce((acc, name) => {
                const cssFile = path.extname(name) === ".css";
                if (!cssFile) return acc;

                const mapName = name + ".map";
                const mapValue = assets[mapName];
                if (!mapValue) return acc;

                acc.push(outputFilesystem.join(outputPath, name));
                return acc;
            }, []);

            return Promise.all(
                processAssets
                    .map(async (output) => {
                        if (!(await fs.pathExists(output))) return;

                        const source = (await fs.readFile(output, "utf8"))
                            .replace(
                                /# sourceMappingURL=(.*\.map)/g,
                                `# sourceMappingURL=${this.publicPath}/$1`,
                            );
                        return fs.writeFile(output, source);
                    }),
            );
        });
    }
}

exports.UpdateCssSourceMaps = UpdateCssSourceMaps;

Usage

// next.config.js
const { UpdateCssSourceMaps } = require("./UpdateCssSourceMaps");

module.exports = {
  assetPrefix: ??,
  webpack(config) {
    // Include asset prefix yourself?  Will also accept the current next config, if this is running in a plugin
    config.plugins.push(new UpdateCssSourceMaps({ assetPrefix: ?? }));

    return config;
  }
}

[ca11ado]

@johnruane I just made middleware that ignores all requests with css.map 😢