Q&ANuxt.jsにてstoreをclassicモードにした後、
typescript化しようと思い、nuxt.config.jsをnuxt.config.tsに変更すると
下記のエラーが発生しました。
外部のmoduleが使えなくなりました。
ご存知の方おられましたら、ご教授お願い致します。
※ typescriptは読み込まれ、使用出来る状態だと思います。
文字数が多く一度に投稿出来なかった為、
ソースコードは、回答に記載させて頂いております。
発生している問題・エラーメッセージ
(cookie-universal-nuxtモジュール)
let token = this.$cookies.get("access_token")
上記の記述をvueファイル等で記述すると下記のエラーが発生
Cannot read property 'get' of undefined
(@nuxtjs/axiosモジュール)
this.$axios.get("users/oauth-check", payload);
上記の記述をvueファイル等で記述すると下記のエラーが発生
Cannot read property 'get' of undefined
(nuxt-device-detectモジュール)
<div v-if="$device.isDesktop"> ~ </div>
this.$device.isMobile
上記の記述をvueファイル等で記述すると下記のエラーが発生
Cannot read property 'isDesktop' of undefined Cannot read property 'isMobile' of undefined
(moment、moment-timezoneモジュール)
this.$moment().unix();
上記の記述をvueファイル等で記述すると下記のエラーが発生
this.$moment is not a function
補足情報（FW/ツールのバージョンなど）
Nuxt.js(SSR) v2.9.2
Vue.js 3.8.4
回答2件
0
ベストアンサー
Nuxt v2.9.0からtypescript関連のpackageが分離されました。
下記リンクをご参照ください。
- リリース情報
https://github.com/nuxt/nuxt.js/releases/tag/v2.9.0
- typescript関連のpackageの追加/削除
https://typescript.nuxtjs.org/migration.html
https://typescript.nuxtjs.org/guide/runtime.html
投稿2019/09/03 12:12
総合スコア327
0
該当のソースコード
package.json
{ "name": "test", "version": "2.8.0", "description": "nuxt.js project", "author": "test", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", "lint": "eslint --ext .ts,.js,.vue --ignore-path .eslintignore .", "precommit": "npm run lint" }, "dependencies": { "@nuxt/typescript": "^2.8.1", "@nuxtjs/axios": "^5.6.0", "@nuxtjs/google-tag-manager": "^2.2.1", "@nuxtjs/proxy": "^1.3.3", "@nuxtjs/sitemap": "^1.2.0", "@nuxtjs/toast": "^3.2.1", "@sentry/browser": "^5.5.0", "@sentry/integrations": "^5.5.0", "algoliasearch": "^3.33.0", "anchorify": "^1.0.2", "autocomplete.js": "^0.36.0", "autolinker": "^3.1.0", "aws-serverless-express": "^3.3.6", "bootstrap": "^4.3.1", "bootstrap-vue": "^2.0.0-rc.26", "card-validator": "^6.2.0", "cookie": "^0.4.0", "cookie-universal-nuxt": "^2.0.16", "cookieparser": "^0.1.0", "cross-env": "^5.2.0", "date-time-format-timezone": "^1.0.21", "dotenv": "^8.0.0", "emoji-js": "^3.4.1", "env-parser": "^1.0.1", "escape-goat": "^2.1.0", "express": "^4.17.1", "japan-postal-code": "^0.2.0", "jquery": "^3.4.1", "jspdf": "^1.5.3", "laravel-echo": "^1.5.4", "luxon": "^1.17.1", "moment": "^2.24.0", "moment-timezone": "^0.5.26", "msgdown": "^1.0.2", "nuxt": "^2.8.1", "nuxt-basic-auth-module": "^1.2.0", "nuxt-client-init-module": "^0.1.4", "nuxt-device-detect": "^1.1.5", "popper.js": "^1.15.0", "pusher-js": "^4.4.0", "sanitize-html": "^1.20.1", "ts-node": "^8.3.0", "v-tooltip": "^2.0.2", "vue-autosuggest": "^2.0.1", "vue-awesome-swiper": "^3.1.3", "vue-clipboard2": "^0.3.0", "vue-datetime": "^1.0.0-beta.8", "vue-html2canvas": "0.0.4", "vue-instantsearch": "^2.2.2", "vue-intercom": "^1.0.14", "vue-kindergarten": "^0.3.3", "vue-loading-template": "^1.3.2", "vue-property-decorator": "^8.2.1", "vue-slide-up-down": "^1.7.2", "vue-the-mask": "^0.11.1", "vue-tippy": "^2.1.3", "vuejs-datepicker": "^1.6.2", "vuelidate": "^0.7.4", "vuex-persistedstate": "^2.5.4", "vuex-storage-sync": "^1.1.6", "weekstart": "^1.0.0" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^1.12.0", "@typescript-eslint/parser": "^1.12.0", "acorn": "^6.2.0", "acorn-dynamic-import": "^4.0.0", "babel-eslint": "^10.0.2", "eslint": "^5.0.0", "eslint-config-prettier": "^6.0.0", "eslint-friendly-formatter": "^4.0.1", "eslint-loader": "^2.2.1", "eslint-plugin-prettier": "3.1.0", "eslint-plugin-vue": "^5.2.3", "node-sass": "^4.12.0", "nodemon": "^1.19.1", "npm-run-all": "^4.1.5", "prettier": "^1.18.2", "sass-loader": "^7.1.0" }, "browserslist": [ "last 2 version", "android >= 4.4", "IE 11" ] }
nuxt.config.ts
import generateUrlFromResource from './services/GenerateUrlFromResource' const webpack = require('webpack') const path = require('path') const axios = require('axios') let envPath = './.env' if (process.env.NODE_ENV === 'production') { envPath = './.env.prod' } else if (process.env.NODE_ENV === 'staging') { envPath = './.env.stg' } const Parsed = require('dotenv').config({ path: envPath }).parsed module.exports = { router: { linkExactActiveClass: 'active-link' }, env: { ...Parsed }, head: { title: 'test', meta: [ { charset: 'utf-8' }, { hid: 'viewport', name: 'viewport', content: 'width=device-width, initial-scale=1' }, { name: 'google-site-verification', content: '9st-McgIso5v__qoLTVTrX81FXW2HxbAI5c3-6U1LX0' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, { rel: 'stylesheet', href: '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' } ], script: [ { src: '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'}, { src: '/fitie.js' }, { src: 'https://cdn.polyfill.io/v2/polyfill.min.js?features=default,fetch,Object.entries,String.prototype.repeat,Array.prototype.find,Array.prototype.findIndex,Math.trunc,Intl.~locale.ja' } ] }, watchQuery: true, modules: [ '@nuxtjs/axios', '@nuxtjs/proxy', '@nuxtjs/toast', '@nuxtjs/sitemap', 'bootstrap-vue/nuxt', 'nuxt-device-detect', 'cookie-universal-nuxt', 'nuxt-client-init-module', 'nuxt-basic-auth-module', ['@nuxtjs/google-tag-manager', {id: Parsed.GTM_TAG_ID, pageTracking: true }] ], basic: { name: 'test', pass: 'test', enabled: process.env.NODE_ENV === 'staging' }, axios: { credentials: true, baseUrl: '/api' }, proxy: { '/api/': JSON.stringify(Parsed.API_URL) }, build: { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }) ], vendor: [ 'vue-awesome-swiper' ], extend (config, { isDev, isClient }) { if (isDev && isClient) { config.module.rules.push({ enforce: 'pre', test: /.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } config.resolve.alias['services'] = path.join(__dirname, 'services') } }, plugins: [ '~/plugins/axios.js', '~/plugins/algoliasearch.js', '~/plugins/bootstrap.js', '~/plugins/filters.js', '~/plugins/global.js', '~/plugins/moment.js', '~/plugins/mixins/flash.js', '~/plugins/mixins/form-handler.js', '~/plugins/mixins/user.js', '~/plugins/v-tooltip', '~/plugins/vue-autosuggest', '~/plugins/vue-clipboard2', '~/plugins/vue-datetime', '~/plugins/vue-intercom', '~/plugins/vue-the-mask', '~/plugins/vuelidate.js', '~/plugins/truncate.js', { src: '~/plugins/sentry.js' }, { src: '~/plugins/tippy.js', ssr: false }, { src: '~/plugins/laravel-echo.js', ssr: false }, { src: '~/plugins/vue-loading.js', ssr: false }, { src: '~/plugins/vuex-persistedstate', ssr: false }, { src: '~/plugins/jspdf', ssr: false }, { src: '~/plugins/html2canvas', ssr: false }, { src: '~plugins/vue-awesome-swiper', ssr: false }, { src: '~/plugins/router-option.js', ssr: false } ], toast: { position: 'bottom-left', duration: 2000 }, loading: { name: 'chasing-dots', color: '#ff5638', background: 'white', height: '4px' }, sitemap: { path: '/sitemap.xml', hostname: Parsed.BASE_URL, cacheTime: 1000 * 60 * 15, gzip: true, generate: false, // Enable me when using nuxt generate exclude: [ '/test', '/test1', '/test2/**' ], routes (callback) { axios.get(Parsed.API_URL + '/sitemap') .then(response => { const productRoutes = generateUrlFromResource(response.data.products, 'product') const categoryRoutes = generateUrlFromResource(response.data.categories, 'category') callback(null, productRoutes.concat(categoryRoutes)) }) .catch(callback) } } }
plugin/moment.js
import moment from "moment-timezone"; moment.tz.setDefault("Asia/Tokyo"); export default ({ app }, inject) => { app.$moment = moment; inject("moment", moment); };
plugin/axios.js
export default function({ app, $axios, store, redirect }) { $axios.onRequest(config => { const token = app.$cookies.get("access_token"); if (token) { config.headers.common["Authorization"] = token; } return config; }); $axios.onError(error => { const response = error.response; if (!response) return; if (response.status === 401 && response.data.code === "token_expired") { store.dispatch("auth/clear"); } else if (response.status === 422) { if (response.data.errors) { const errors = response.data.errors; response.data.message = errors[Object.keys(errors)[0]][0]; } } if (response.data && response.data.message && process.client) { if (response.status === 401 && response.data.code === "login_failed") { app.$toast.error( "ログインに失敗しました。アカウント情報をご確認ください。", { duration: 7000 } ); } else { app.$toast.error(response.data.message, { duration: 7000 }); } } store.commit("application/setGeneralLoading", false, { root: true }); return Promise.reject(response); }); $axios.onResponse(response => { const newToken = response.headers.authorization; if (newToken) { store.dispatch("auth/setToken", newToken); } const message = response.data.message; if (message) app.$toast.success(message, { duration: 5000 }); return response; }); }
投稿2019/09/03 09:33
総合スコア32
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/03 12:13
2019/09/04 00:34
2019/09/04 09:27 編集
2019/09/06 02:59
2019/09/10 04:02