React项目中WebWorker集成Axios实现CRUD遇引用错误求助

错误信息 #

ERROR
Uncaught ReferenceError: axios__WEBPACK_IMPORTED_MODULE_0__ is not defined
at handleError (http://localhost:3000/static/js/bundle.js:119591:58)
at http://localhost:3000/static/js/bundle.js:119610:7

问题场景 #

我希望在Worker线程中执行数据CRUD操作，释放主线程保证更快响应，但运行时触发上述错误。

相关代码 #

worker.js #

import axios from "axios" 

export default function AppWorker(args) {
    onmessage = function(e) {
        if (e.data.action === "join_network") {
            axios.get('http://127.0.0.1:8000/get_allclient')
            .then((response) =>{
            postMessage(response.data);
        })
        .catch(function (error) {
            postMessage(error.message);
        });
    }
    };
}

WebWorker.js #

export default class WebWorker {
    constructor(worker) {
        let code = worker.toString();
        code = code.substring(code.indexOf("{") + 1, code.lastIndexOf("}"));
        const blob = new Blob([code], { type: "application/javascript" });
        return new Worker(URL.createObjectURL(blob));
    }
}

appcomponent.jsx #

const UploadWorker = () => {

    const handleImportClick = async (event) => {

        const file = event.target.files[0];

        console.log('clicked');
        const worker = new WebWorker(AppWorker);

        worker.onmessage = function(e) {
            console.log('Worker response', e.data);
            //setResult(true);
            console.log(e.data);
            alert("success")
        };

        worker.onerror = function(e) {
            console.log('error : ', e);
        };


        // Post a message to the worker
        if (file !== null) {
            worker.postMessage({
                action: "join_network"
            });
        }

    };
}

解决办法 #

问题根源 #

你当前通过将函数转字符串生成Blob URL的方式创建Worker，会导致webpack对import axios的打包处理失效。Worker运行在独立的全局环境中，无法访问主线程打包后的模块变量axios__WEBPACK_IMPORTED_MODULE_0__，因此触发未定义错误。

可行方案 #

方案1：用原生fetch替代axios

Worker环境支持原生fetch API，无需额外依赖库，直接替换即可：

// 修改后的worker.js
export default function AppWorker(args) {
    onmessage = function(e) {
        if (e.data.action === "join_network") {
            fetch('http://127.0.0.1:8000/get_allclient')
            .then(response => response.json())
            .then((data) =>{
                postMessage(data);
            })
            .catch(function (error) {
                postMessage(error.message);
            });
        }
    };
}

方案2：让webpack正确打包Worker文件（推荐）

放弃函数转字符串的方式，直接让webpack单独打包Worker脚本：

1. 重构worker.js为独立脚本：

// worker.js
import axios from "axios";

self.onmessage = function(e) {
    if (e.data.action === "join_network") {
        axios.get('http://127.0.0.1:8000/get_allclient')
        .then((response) =>{
            postMessage(response.data);
        })
        .catch(function (error) {
            postMessage(error.message);
        });
    }
};

2. 在组件中直接实例化Worker：

// 修改appcomponent.jsx中的Worker创建逻辑
const worker = new Worker(new URL('./worker.js', import.meta.url));

这种方式下webpack会自动将Worker文件单独打包，axios会被正确包含进Worker的运行环境，彻底解决模块未定义问题。

内容的提问来源于stack exchange，提问作者Shubham Mojad