wepack4 vuejs ssr es5 : (0 , _app.createApp) is not a function

Question

repo git: https://github.com/darkiron/SSR-vue-template branche : https://github.com/darkiron/SSR-vue-template/tree/sass (sass)

I try to update vue-loader for extract sass in includePaths of sass-loader for webpack: but when i compile obtain this error :

TypeError: (0 , _app.createApp) is not a function at es5_server_entry.js:441:39 at new Promise () at module.exports../src/entry-server.js.exports.default (src/entry-server.js:4:8) at /Users/vincent/Desktop/SSR-vue-template/node_modules/vue-server-renderer/build.js:8375:43 at new Promise () at /Users/vincent/Desktop/SSR-vue-template/node_modules/vue-server-renderer/build.js:8372:14 at Object.renderToString (/Users/vincent/Desktop/SSR-vue-template/node_modules/vue-server-renderer/build.js:8564:9) at app.get (/Users/vincent/Desktop/SSR-vue-template/server.js:64:11) at Layer.handle [as handle_request] (/Users/vincent/Desktop/SSR-vue-template/node_modules/express/lib/router/layer.js:95:5) at next (/Users/vincent/Desktop/SSR-vue-template/node_modules/express/lib/router/route.js:137:13)

my entry server import my app.js only:

import { createApp } from './app'

export default context => {
    return new Promise(
        (resolve, reject) => {
            const { app, router, store } = createApp()

            router.push(context.url)

            router.onError((err) => {
                console.log(err)
            })

            router.onReady(() => { 

                const matchedComponents = router.getMatchedComponents()

                if(!matchedComponents.length){
                    return reject({ code: 404})
                }

                Promise.all(matchedComponents.map(
                    component => {
                        if(component.asyncData) {
                            return component.asyncData({
                                store, 
                                route: router.currentRoute
                            })
                        }
                    }
                )).then(() => {
                    context.state = store.state
                    resolve(app)
                }).catch(reject)

            }, (reject) => { console.log(reject)})
        }
    )
}

and my app.js :

import Vue from 'vue'
import App from './App.vue'
import { createRouter } from './router'
import { createStore } from './store'
import { sync } from 'vuex-router-sync'
import metaMixin from './Utils/meta-mixin'
import filters from './Utils/filters'

Vue.mixin(metaMixin)
Vue.use(filters)


export function createApp () {
    const router = createRouter()
    const store = createStore()

    // synchroniser pour que l'état de la route soit disponible en tant que donnée du store
    sync(store, router)

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

    return { app, router, store }
}

where is the problems, i don't understand, i will be crazy

Answer 1

the webpack generated code :

/***/ "./src/entry-server.js":
/*!*****************************!*\
  !*** ./src/entry-server.js ***!
  \*****************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});

var _app = __webpack_require__(/*! ./app */ "./src/app.vue");

exports.default = function (context) {
    return new Promise(function (resolve, reject) {
        // const { app, router, store } = createApp()
        var _ref = new _app.createApp(),
            app = _ref.app,
            router = _ref.router,
            store = _ref.store;

        router.push(context.url);

        router.onError(function (err) {
            console.log(err);
        });

        router.onReady(function () {

            var matchedComponents = router.getMatchedComponents();

            if (!matchedComponents.length) {
                return reject({ code: 404 });
            }

            Promise.all(matchedComponents.map(function (component) {
                if (component.asyncData) {
                    return component.asyncData({
                        store: store,
                        route: router.currentRoute
                    });
                }
            })).then(function () {
                context.state = store.state;
                resolve(app);
            }).catch(reject);
        }, function (reject) {
            console.log(reject);
        });
    });
};

it seems that webpack search app.view instead of app.js