Nuxt.jsでaxios moduleを使用しているのですが、TypeScriptで書き換えをしたところ
Apiを取得できなくなってしましました。
間違っている部分、設定が足りない部分があればご教示頂ければとおもいます。
試したこと
index.d.tsに$axiosの引数に型がつくようにした。
ts
1/* /types/nuxt/index.d.ts */ 2import { NuxtAxiosInstance } from "@nuxtjs/axios" 3 4export interface Context { 5 $axios: NuxtAxiosInstance 6}
ts
1import { Component, Vue } from 'vue-property-decorator' 2@Component({ 3 async asyncData({ $axios }) { 4 const data = await $axios.$get('/api/wait_company') 5 return { 6 companies: data 7 } 8 } 9})
ts
1// nuxt.config.ts 2import NuxtConfiguration from '@nuxt/config' 3const pkg = require('./package') 4 5const nuxtConfig: NuxtConfiguration = { 6 mode: 'universal', 7 8 /* 9 ** Headers of the page 10 */ 11 head: { 12 title: pkg.name, 13 meta: [ 14 { charset: 'utf-8' }, 15 { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 16 { hid: 'description', name: 'description', content: pkg.description } 17 ], 18 link: [ 19 { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 20 ] 21 }, 22 23 /* 24 ** Customize the progress-bar color 25 */ 26 loading: { color: '#fff' }, 27 28 /* 29 ** Global CSS 30 */ 31 css: [ 32 ], 33 34 /* 35 ** Plugins to load before mounting the App 36 */ 37 plugins: [ 38 { src: '~/plugins/swiper', ssr: false }, 39 { src: '@/plugins/axios.js', ssr: false } 40 ], 41 42 /* 43 ** Nuxt.js modules 44 */ 45 modules: [ 46 // Doc: https://axios.nuxtjs.org/usage 47 '@nuxtjs/axios', 48 '@nuxtjs/pwa', 49 '@nuxtjs/auth' 50 ], 51 /* 52 ** Axios module configuration 53 */ 54 axios: { 55 // proxyHeaders: false 56 }, 57 auth: { 58 strategies: { 59 facebook: { 60 client_id: '1598674820436253', 61 userinfo_endpoint: 'https://graph.facebook.com/v2.12/me?fields=about,name,picture{url},email,birthday', 62 scope: ['public_profile', 'email', 'user_birthday'] 63 } 64 } 65 }, 66 /* 67 ** Build configuration 68 */ 69 build: { 70 /* 71 ** You can extend webpack config here 72 */ 73 extend(config, ctx) { 74 if (ctx.isDev && ctx.isClient) { 75 if (!config.module) return 76 config.module.rules.push({ 77 enforce: 'pre', 78 test: /.(js|vue)$/, 79 loader: 'eslint-loader', 80 exclude: /(node_modules)/ 81 }) 82 } 83 } 84 } 85} 86export default nuxtConfig 87
エラー内容
bash
1Cannot read property '$get' of undefined
追記
どうやらnuxt.config.tsに問題がありそうです。
backpack-core経由で起動しているのですが、
その際にnuxt.config.tsの読み込みに失敗してるみたいです。
backpack.config.js
js
1module.exports = { 2 webpack: (config) => { 3 config.entry.main = [ 4 './server/index.ts' 5 ] 6 config.resolve = { 7 extensions: ['.ts', '.js', '.json'] 8 } 9 config.module.rules.push( 10 { 11 test: /.ts$/, 12 loader: 'awesome-typescript-loader' 13 } 14 ) 15 return config 16 } 17}
/server/index.ts
ts
1import express from 'express' 2import consola from 'consola' 3import { Nuxt, Builder } from 'nuxt' 4import bodyParser from 'body-parser' 5import session from 'express-session' 6import cookieParser from 'cookie-parser' 7import csrf from 'csurf' 8import api from './api' 9const app = express() 10app.use(bodyParser.json()) 11app.use(bodyParser.urlencoded({ 12 extended: true 13})) 14app.use(cookieParser()) 15app.use(session({ 16 secret: 'example', 17 resave: false, 18 saveUninitialized: false, 19 cookie: { 20 maxage: 1000 * 60 * 30 21 } 22})) 23app.use(csrf({ 24 cookie: true 25})) 26app.use('/api', api) 27// Import and Set Nuxt.js options 28const config = require('../nuxt.config.ts') 29config.dev = !(process.env.NODE_ENV === 'production') 30 31async function start() { 32 // Init Nuxt.js 33 const nuxt = new Nuxt(config) 34 35 const { host, port } = nuxt.options.server 36 37 // Build only in dev mode 38 if (config.dev) { 39 const builder = new Builder(nuxt) 40 await builder.build() 41 } else { 42 await nuxt.ready() 43 } 44 45 // Give nuxt middleware to express 46 app.use(nuxt.render) 47 48 // Listen the server 49 app.listen(port, host) 50 consola.ready({ 51 message: `Server listening on http://${host}:${port}`, 52 badge: true 53 }) 54} 55start() 56
エラー内容
bash
1* ./server/index.ts in multi ./server/index.ts
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。