How can I use axios? A get the error TypeError: adapter is not a function at dispatchRequest.

[vtoropchin]

When sending a get request, the promise is redirected with an error:

TypeError: adapter is not a function at dispatchRequest (/Users/vladimir/Programming/GR/lawsystem.test/storage/app/ssr/28d918e4632a3b48ddcaf89db6812bd7.js:1058:10) TypeError: adapter is not a function at dispatchRequest (/Users/vladimir/Programming/GR/lawsystem.test/storage/app/ssr/28d918e4632a3b48ddcaf89db6812bd7.js:1058:10) at async Promise.all (index 0) "

webpack:

const mix = require('laravel-mix');

mix.js('resources/js/CustomerPortal/app-server.js', 'public/js/customer-portal');
mix.webpackConfig({
    target: 'node',
});

Here I make get request.

getServices() {
      return axios.get('https://lawsystem.grani-riska.ru/api/services/get',
      ).then(response => {
          return response;
      }).catch(error => {
          console.log(error); //here I catch the error
      })
  },

app.js

import Vue from 'vue';
import store from '../Core/store';
import VueRouter from 'vue-router';

const router = new VueRouter({
    mode: 'history',
    routes: routes.concat(serviceRoutes.routes)
});

const app = new Vue({
    render: h => h(AppComponent),
    router,
    store
});

export default {app, router, store}

app-server.js

import app from './app'
import renderVueComponentToString from 'vue-server-renderer/basic';

new Promise((resolve, reject) => {
    app.router.push(context.url);
    app.router.onReady(() => {
        const matchedComponents = app.router.getMatchedComponents();
        if (!matchedComponents.length) {
            return reject(app.app);
        }

        context.rendered = () => {
            context.state = app.store.state
        };

        resolve(app.app);
    }, reject);
}).then(app => {
    renderVueComponentToString(app, (err, html) => {
        if (err) {
            throw new Error(err);
        }

        dispatch(html);
    });
}).catch((err) => {
    throw new Error(err);
});

Version axios - 0.19.2 vue - 2.6.11 laravel-server-side-rendering = 1.3

[kieuminhcanh]

I found that context.rendered not work

[JonathanMurre]

I have the same problem, how did you fix this?

[nicovigil1]

[SerhiyP]

Hello I suppose that problem there because the process variable is empty when script runs

[suhostv]

@SerhiyP what process variable are you talking about? I have the same problem during ssr, on client-side requests are fine

[SerhiyP]

I don't remember what was the problem

But you can try to set in webpack target: 'node'

It might help you

[suhostv]

@SerhiyP thanks for your response there is the reason why we don't have this in our webpack configuration, it breaks our logger ('fs' module issues) can you explain why target:node would fix axios issue? not really getting this...

[SerhiyP]

Oh... Sorry For adapter, you should use

`import adapter from 'axios/lib/adapters/http'

axios(URL, { adapter: adapter }) `

[suhostv]

@SerhiyP tried this, getting XMLHttpRequest is not defined error when doing that same as in this discussion: https://github.com/axios/axios/issues/2968

[yasen002]

I don't know why this issue is closed.... I am getting the same error. one way to work around this, I guess is to use serversideProps in each individual page.

[dmwin72015]

same error,how to fix it???

[aadarshp31]

Oh... Sorry For adapter, you should use

`import adapter from 'axios/lib/adapters/http'

axios(URL, { adapter: adapter }) `

This answer worked for me perfectly fine and is definitely a lifesaver so Thanks for your contribution @SerhiyP . I'm grateful ❤️

MY USE CASE I am working on a vscode web extension which I want to work in desktop (nodejs) environment. Axios was throwing the exact same error for me. This fix helped me resolve this issue.