Functioning code no longer working after being minified and deployed

Question

I have some code in a web worker that is working perfectly locally, but as soon as I build and deploy (which minifies the code) it no longer works.

The unminified code looks like this:

const mapSourceCode = (treeNode, mfi, {objectType, types, fileType, templateType}) => {
        let sourceCodeMap = new Map();
        let ownerMap = new Map();
        let sourceCodeList = [];
        let ownerList = [];

        let mfiMap = new Map();
        mfi.forEach(row => mfiMap.set(row.uuid, row));

        let sourceCodeObjects = mfi.filter(row => types.includes(row.objectTypeUuid));
        if(sourceCodeObjects.length < 1)
            return {sourceCodeMap, sourceCodeTree: undefined};

        try {
            sourceCodeObjects.forEach(sourceObj => {
                let owner = findOwner(sourceObj, sourceObj, mfiMap, {...treeNode.data}, objectType);

The minified code is this:

i = function(e, t, n) {
        var c = n.objectType
          , o = n.types
          , i = n.fileType
          , u = n.templateType
          , l = new Map
          , s = new Map
          , f = []
          , p = []
          , m = new Map;
        t.forEach((function(e) {
            return m.set(e.uuid, e)
        }
        ));
        var h = t.filter((function(e) {
            return o.includes(e.objectTypeUuid)
        }
        ));
        if (h.length < 1)
            return {
                sourceCodeMap: l,
                sourceCodeTree: void 0
            };
        try {
            if (h.forEach((function(n) {
                var r = a(n, n, m, Object(d.a)({}, e.data), c);

The line it's erroring out on is {...treeNode.data} on the last line. The error is ReferenceError: d is not defined

I can't figure out what the issue could be? Like I said everything runs great on locally. Any help is greatly appreciated

Answer 1

I found the issue, in case anybody runs into this same thing. Normally when using web workers you need to tell your builder (webpack) to build / compile workers separately. I'm using the default create-react-app configuration which doesn't give access to that part of webpack. unless you eject from create-react-app completely (which I'm currently not ready to do)

I'm using the react hook called useWorker, where I pass the function I want to allocate to the worker.

When your code is optimized and minified variable names are replaced with smaller names (mostly 1 or 2 letters from what I've seen). Because I didn't have any custom loaders to load my worker code, it used variables from the global scope assuming it would have access. When the code was extracted to a separate thread outside the main thread it no longer had access to those variables and thus didn't work.

The fix is to

1. Add a loader (you can either eject from create-react-app, or there may be some npm libraries that will give you access to that particular part of webpack)
2. Or my solution was to create the function in a string and create a function using the Function constructor like so

const generateFunction = new Function('treeNode', 'mfi', 'types', 'action', generateFunctionString);

Where the generateFunctionString was a string like: "return a + b"

I then passed that function into my useWorker hook:

const [generatorWorker] = useWorker(generateFunction);