nuxtをビルドした後、vuexのTypeErrorが発生する

Question

前提・実現したいこと

NuxtをfirebaseでSSRしたい！

発生している問題・エラーメッセージ

Nuxtをビルドし、sudo firebase serve --only functions,hostingで動作確認していましたが、Storeから値がとれずコンソールをみるとvuexでTypeErrorが出ていた。

TypeError: d is not a constructor
    at new h (7de11f47fabad9dcedfc.js:2)
    at t.default (e874d72cd7bd061da4dc.js:1)
    at e874d72cd7bd061da4dc.js:1
    at h (7de11f47fabad9dcedfc.js:2)
    at Generator._invoke (7de11f47fabad9dcedfc.js:2)
    at Generator.t.<computed> [as next] (7de11f47fabad9dcedfc.js:2)
    at r (7de11f47fabad9dcedfc.js:2)
    at l (7de11f47fabad9dcedfc.js:2)

該当のソースコード

~
var d;
var h = function(t) {
    var e = this;
    void 0 === t && (t = {}),
    !d && "undefined" != typeof window && window.Vue && O(window.Vue);
    var n = t.plugins;
    void 0 === n && (n = []);
    var o = t.strict;
    void 0 === o && (o = !1),
    this._committing = !1,
    this._actions = Object.create(null),
    this._actionSubscribers = [],
    this._mutations = Object.create(null),
    this._wrappedGetters = Object.create(null),
    this._modules = new l(t),
    this._modulesNamespaceMap = Object.create(null),
    this._subscribers = [],
    this._watcherVM = new d;
~

上記はvuex.jsがミニファイされているコードで以下と同様です。

  var Vue; // bind on install

  var Store = function Store (options) {
    var this$1 = this;
    if ( options === void 0 ) options = {};

    // Auto install if it is not done yet and `window` has `Vue`.
    // To allow users to avoid auto-installation in some cases,
    // this code should be placed here. See #731
    if (!Vue && typeof window !== 'undefined' && window.Vue) {
      install(window.Vue);
    }

    {
      assert(Vue, "must call Vue.use(Vuex) before creating a store instance.");
      assert(typeof Promise !== 'undefined', "vuex requires a Promise polyfill in this browser.");
      assert(this instanceof Store, "store must be called with the new operator.");
    }

    var plugins = options.plugins; if ( plugins === void 0 ) plugins = [];
    var strict = options.strict; if ( strict === void 0 ) strict = false;

    // store internal state
    this._committing = false;
    this._actions = Object.create(null);
    this._actionSubscribers = [];
    this._mutations = Object.create(null);
    this._wrappedGetters = Object.create(null);
    this._modules = new ModuleCollection(options);
    this._modulesNamespaceMap = Object.create(null);
    this._subscribers = [];
    this._watcherVM = new Vue();

var Vueがvar dとなり、new Vue()がnew dとなっていることから、コンソールのログは理解できますが、解決方法がわかりません。

Answer 1

挙げられている情報だけでは原因特定が難しいため、2点ほど確認させてください。

・以下のエラーは出てませんでしょうか。もしくは他のエラーがあれば、追記ください。

[vuex] must call Vue.use(Vuex) before creating a store instance.

・Nuxt.js、Webpack周りの設定を教えて下さい

Comments

[KMDev]

nuxt.config.jsは以下のとおりです。

``
const pkg = require('./package')

module.exports = {
buildDir: '../functions/nuxt',
mode: 'universal',
/*
** Headers of the page
*/
head: { ...
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [
{ src: 'https://kit.fontawesome.com/cd0100fb14.js' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'@/assets/sass/common.scss',
'swiper/dist/css/swiper.css'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
'~/plugins/firebase',
{ src: '~/plugins/datepicker', ssr: false },
{ src: '~/plugins/swiper', ssr: false }
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/eslint-module',
'@nuxtjs/markdownit'
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
},
/*
** MarkdownIt
*/
markdownit: {
injected: true,
breaks: true,
html: true,
linkify: true,
typography: true,
xhtmlOut: true,
quotes: '“”‘’'
},
/*
** Build configuration
*/
build: {
publicPath: '/public/',
vendor: [
'vuejs-datepicker',
'vue-awesome-swiper'
],
/*
** You can extend webpack config here
*/
extend(config, ctx) {
if (ctx.isDev && ctx.isClient) {
config.devtool = 'inline-cheap-module-source-map' // <-- ここを足す
config.module.rules.push({
enforce: 'pre',
test: /.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}
``

[yuhigash]

```
resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }
```

すみません、返信が遅くなりました。
Vueを解決できていないと思いますので、上記のaliasをwebpackの設定に追加してみてください。

[KMDev]

回答ありがとうございます。
どうやらstoreの記述がまずかったようです。
クラシックモードからモジュールモードへ切り替えたところ、動くようになりました。

Answer 2

storeの記述がまずかったようです。
クラシックモードからモジュールモードへ切り替えたところ、動くようになりました。