AEM Cloud Service - Adding Source Maps for Main File in AEM React SPA

Goal

Code in this post is a workaround to open the main js file during build (eg. ui.frontend\build\static\js\main.174a7c53.chunk.js) and adjust the source map location to point to the right file... 

eg. to change //# sourceMappingURL=main.174a7c53.chunk.js.map to //# sourceMappingURL=/apps/eaem-spa-extend-model-client/clientlibs/clientlib-react/resources/static/js/main.174a7c53.chunk.js.map

Github Code

Code

1) Modify the build command in your project ui.frontend\package.json to add node copy-main-map.js

"build": "react-scripts build && clientlib && node copy-main-map.js",

2) Use latest node version in ui.frontend\pom.xml

            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <nodeVersion>v10.16.0</nodeVersion>
                </configuration>
            </plugin>

3) Add the following code in ui.frontend\copy-main-map.js

//this is for chaning the sourceMappingURL in clientlib-react main file
const path = require('path');
const fs = require("fs-extra");
const readline = require('readline');

const PROJECT_FOLDER_NAME = "eaem-spa-extend-model-client"; //path.basename(path.join(__dirname, '..'));

const MAP_BUILD_DIR = path.join(__dirname, 'build', "static", "js");

const CLIENTLIB_REACT_JS_DIR = path.join(__dirname,'..', 'ui.apps','src','main','content', 
                            'jcr_root','apps', PROJECT_FOLDER_NAME ,'clientlibs', 'clientlib-react', "js");

/*
fs.copySync(MAP_BUILD_DIR, CLIENTLIB_REACT_JS_DIR, {
    dereference: true,
    filter: (filePath) => {
        if (fs.lstatSync(filePath).isDirectory()) {
            return true;
        }
        return path.basename(filePath).startsWith("main.") && path.basename(filePath).endsWith(".map");
    }
});*/

const mainFile = path.join(CLIENTLIB_REACT_JS_DIR, fs.readdirSync(CLIENTLIB_REACT_JS_DIR).filter((fileName) => {
    return fileName.startsWith("main.")
})[0]);

const mainMapPath = "/apps/" + PROJECT_FOLDER_NAME + "/clientlibs/clientlib-react/resources/static/js/" + path.basename(mainFile) + ".map";

async function writeCorrectSourcePath() {
    const fileStream = fs.createReadStream(mainFile);

    const rl = readline.createInterface({
        input: fileStream,
        crlfDelay: Infinity
    });
    
    let mainFileContent = "";

    for await (const line of rl) {
        if(line.startsWith("//# sourceMappingURL=")){
            mainFileContent = mainFileContent + "//# sourceMappingURL=" + mainMapPath + "\r\n";
            continue;
        }            

        mainFileContent = mainFileContent + line + "\r\n";
    }

    fs.writeFileSync(mainFile, mainFileContent, 'utf-8');
}

writeCorrectSourcePath();