Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I've try use axios request in web worker by vue plugin

My code looks like this:

//worker.js
import axios from 'axios';
export default function getApiData(args) {
  axios.get('/api/test').then(response => {
    console.log(response);
And main file with Vue
//main.js
import getApiData from './worker.js';
Vue.use(VueWorker);
window.vueApp = new Vue({
  //...
  created: function() {
    this.updateWorker = this.$worker.create([
        message: 'getApiData ',
        func: getApiData 
    this.testWorker.postMessage('getApiData ', [this.args])
        .then(result => {
          console.log(result);
  //...
And I got this error
Uncaught ReferenceError: axios__WEBPACK_IMPORTED_MODULE_0___default is
not defined
What I'm doing wrong?
                @Lukasz'Severiaan'Grela not really, instead of this plugin I used the native capabilities of web workers
– MelNik
                Jun 27, 2019 at 8:42
                is there any fix for this with respect to webpack? I am experiencing this with any usage of promises, either in my code or external libraries, so this seems like a big problem. If you figured it out, you should post the solution
– wkhatch
                Dec 13, 2019 at 16:41
I had the same problem and solved it by going back to the basics - using plain old XMLRequest (see below). 
You can't use axios inside the worker because the blob that's created behind the scenes to load the worker.js runs in a different context than your main.js. In order for axios to work, you would have to setup a new webpack bundler to just bundle the worker by itself. I didn't want to do that - it makes the project structure unnecessary complex. 
Here is a simple solution (works with json and non-json response).
// worker.js
export default () => {
  self.addEventListener('message', e => {
    if (!e) return;
    // wrap in try/catch if you want to support IE11 and older browsers
    // that don't support Promises. The implementation below doesn't work
    // even when polyfills are loaded in the main project because
    // the worker runs in a different context, ie no webpack bundles here.
    try {
      const fetchData = (url, isJSON = true) => {
        return new Promise((resolve, reject) => {
          function reqListener() {
            if (this.status !== 200) {
              return reject();
            const response = isJSON
              ? JSON.parse(this.responseText)
              : this.responseText;
            resolve(response);
          const oReq = new XMLHttpRequest();
          oReq.addEventListener('load', reqListener);
          oReq.open('GET', url);
          oReq.send();
      const baseUrl = 'https://static.newsfilter.io/';
      const { articleId } = e.data;
      const jsonUrl = baseUrl + articleId + '.json';
      const htmlUrl = baseUrl + articleId + '.html';
      // My use case requires 2 requests in parallel. 
      const tasks = [fetchData(jsonUrl), fetchData(htmlUrl, false)];
      Promise.all(tasks)
        .then(data => {
          postMessage({ json: data[0], html: data[1] });
        .catch(error => {
          postMessage({ isError: true, error });
    } catch (error) {
      postMessage({ isError: true });
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.