Warm tip: This article is reproduced from stackoverflow.com, please click
vue.js vuetify.js server-side-rendering

Vue SSR + Vuetify, "Unexpected identifier" error

发布于 2020-03-27 10:26:12

I have SPA project with Vue, Vue-router, Vuex and Vuetify. I try to fix it to server side rendering with @akryum/vue-cli-plugin-ssr. But I get an error.

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at createScript (vm.js:264:10)
    at Object.runInThisContext (vm.js:316:10)
    at Module._compile (internal/modules/cjs/loader.js:670:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
    at Module.load (internal/modules/cjs/loader.js:605:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
    at Function.Module._load (internal/modules/cjs/loader.js:536:3)
    at Module.require (internal/modules/cjs/loader.js:643:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at r (/home/ns16/projects/my/vuejs/vue-articles-app_ssr-plugin/node_modules/vue-server-renderer/build.dev.js:9300:16)
    at Object.vuetify/lib (webpack:/external "vuetify/lib":1:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module../src/plugins/vuetify.js (src/plugins/vuetify.js:1:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module../src/main.js (app.js:777:74)
error during render url : /
/home/ns16/projects/my/vuejs/vue-articles-app_ssr-plugin/node_modules/vuetify/lib/index.js:1
(function (exports, require, module, __filename, __dirname) { import Vuetify from './components/Vuetify';
                                                                     ^^^^^^^

This is my code

src/main.js

import Vue from 'vue'

import './plugins/vuetify'
import App from './App.vue'
import { createRouter } from './router'
import { createStore } from './store'

Vue.config.productionTip = false

export async function createApp({ beforeApp = () => {}, afterApp = () => {} } = {}) {
    const router = createRouter()
    const store = createStore()

    await beforeApp({ router, store })

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

    await afterApp(result)

    return result
}

src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
    iconfont: 'md',
})

What am I doing wrong?

Questioner
ns16
Viewed
161
ns16 2019-07-03 22:55

I created a vue.config.js file with the following content:

module.exports = {
    pluginOptions: {
        ssr: {
            nodeExternalsWhitelist: [/^vuetify/]
        }
    }
}

It helps me.