TypeScript（Nuxt.js）でaxios moduleでapiを取得できない

Question

Nuxt.jsでaxios moduleを使用しているのですが、TypeScriptで書き換えをしたところ
Apiを取得できなくなってしましました。
間違っている部分、設定が足りない部分があればご教示頂ければとおもいます。

試したこと

index.d.tsに$axiosの引数に型がつくようにした。

/* /types/nuxt/index.d.ts */
import { NuxtAxiosInstance } from "@nuxtjs/axios"

export interface Context {
  $axios: NuxtAxiosInstance
}

import { Component, Vue } from 'vue-property-decorator'
@Component({
  async asyncData({ $axios }) {
    const data = await $axios.$get('/api/wait_company')
    return {
      companies: data
    }
  }
})

// nuxt.config.ts
import NuxtConfiguration from '@nuxt/config'
const pkg = require('./package')

const nuxtConfig: NuxtConfiguration = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    { src: '~/plugins/swiper', ssr: false },
    { src: '@/plugins/axios.js', ssr: false }
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/auth'
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // proxyHeaders: false
  },
  auth: {
    strategies: {
      facebook: {
        client_id: '1598674820436253',
        userinfo_endpoint: 'https://graph.facebook.com/v2.12/me?fields=about,name,picture{url},email,birthday',
        scope: ['public_profile', 'email', 'user_birthday']
      }
    }
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        if (!config.module) return
        config.module.rules.push({
          enforce: 'pre',
          test: /.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}
export default nuxtConfig

エラー内容

Cannot read property '$get' of undefined

追記

どうやらnuxt.config.tsに問題がありそうです。
backpack-core経由で起動しているのですが、
その際にnuxt.config.tsの読み込みに失敗してるみたいです。

backpack.config.js

module.exports = {
  webpack: (config) => {
    config.entry.main = [
      './server/index.ts'
    ]
    config.resolve = {
      extensions: ['.ts', '.js', '.json']
    }
    config.module.rules.push(
      {
        test: /.ts$/,
        loader: 'awesome-typescript-loader'
      }
    )
    return config
  }
}

/server/index.ts

import express from 'express'
import consola from 'consola'
import { Nuxt, Builder } from 'nuxt'
import bodyParser from 'body-parser'
import session from 'express-session'
import cookieParser from 'cookie-parser'
import csrf from 'csurf'
import api from './api'
const app = express()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
  extended: true
}))
app.use(cookieParser())
app.use(session({
  secret: 'example',
  resave: false,
  saveUninitialized: false,
  cookie: {
    maxage: 1000 * 60 * 30
  }
}))
app.use(csrf({
  cookie: true
}))
app.use('/api', api)
// Import and Set Nuxt.js options
const config = require('../nuxt.config.ts')
config.dev = !(process.env.NODE_ENV === 'production')

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  const { host, port } = nuxt.options.server

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    await nuxt.ready()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()

エラー内容

* ./server/index.ts in multi ./server/index.ts

Answer 1

backpackを使わずに起動をすることで解決できました。

package.jsonのdevを下記に

"dev": "cross-env NODE_ENV=development nodemon server/index.ts --watch server",

tsconfig.jsonを下記に
moduleを外してあげます

{
  "compilerOptions": {
    "target": "esnext",
    // "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ]
  }
}

起動ファイルを下記に
nuxt.config.tsを読み込む際にimport形式に変更

// server/index.js
import express from 'express'
import consola from 'consola'
import { Nuxt, Builder } from 'nuxt'
import bodyParser from 'body-parser'
import cookieParser from 'cookie-parser'
import api from './api'
const app = express()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
  extended: true
}))
app.use(cookieParser())
app.use(session({
  secret: 'example',
  resave: false,
  saveUninitialized: false,
  /*
  cookie: {
    maxage: 1000 * 60 * 30
  }
  */
}))
app.use(csrf({
  cookie: true
}))
app.use('/api', api)

// Import and Set Nuxt.js options
// ここをimportに変更してあげる
import config from '../nuxt.config'
config.dev = !(process.env.NODE_ENV === 'production')

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  const { host, port } = nuxt.options.server

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    await nuxt.ready()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()

これで今のところはnuxt.config.tsが読み込まれ、axiosが動くようになりました。