CroudTech / vue-fullcalendar

FullCalendar Wrapper for vue
MIT License
483 stars 100 forks source link

Not working with Nuxt SSR #151

Closed ribrewguy closed 6 years ago

ribrewguy commented 6 years ago

When using this plugin with Nuxt, by default I get this error:

[1] 2018-08-13T21:11:06.367Z nuxt:render Rendering url /
[1] Caught error: SyntaxError /ui/node_modules/vue-full-calendar/index.js:1
[1] (function (exports, require, module, __filename, __dirname) { import FullCalendar from './components/FullCalendar.vue'
[1]                                                               ^^^^^^
[1]
[1] SyntaxError: Unexpected token import
[1]     at createScript (vm.js:80:10)
[1]     at Object.runInThisContext (vm.js:139:10)
[1]     at Module._compile (module.js:576:28)
[1]     at Object.Module._extensions..js (module.js:623:10)
[1]     at Module.load (module.js:531:32)
[1]     at tryModuleLoad (module.js:494:12)
[1]     at Function.Module._load (module.js:486:3)
[1]     at Module.require (module.js:556:17)
[1]     at require (internal/module.js:11:18)
[1]     at r (/ui/node_modules/vue-server-renderer/build.js:8341:16)
[1]     at Object.<anonymous> (server-bundle.js:27169:18)
[1]     at __webpack_require__ (webpack:/webpack/bootstrap 8ace3ade928f17738eb9:25:0)
[1]     at Object.<anonymous> (src/plugins/calendar.js:1:0)
[1]     at __webpack_require__ (webpack:/webpack/bootstrap 8ace3ade928f17738eb9:25:0)
[1]     at Object.<anonymous> (.nuxt/index.js:1:0)
[1]     at __webpack_require__ (webpack:/webpack/bootstrap 8ace3ade928f17738eb9:25:0)

Setting ssr: false gets the app a little further, but trying to use the component fails with the same error.

My plugin script (calendar.js):

import Vue from 'vue';
import FullCalendar from 'vue-full-calendar';

Vue.component(FullCalendar);

Please advise.

BrockReece commented 6 years ago

You are trying to use the plugin as a component. You need to either change your import statement to import the component...

import Vue from 'vue';
import { FullCalendar } from 'vue-full-calendar';

Vue.component(FullCalendar);

... or use Vue.use to install the plugin ...

import Vue from 'vue';
import FullCalendar from 'vue-full-calendar';

Vue.use(FullCalendar);

Hope that helps?

ribrewguy commented 6 years ago

Works great thanks! Guess I missed that detail after looking back and forth between my code and the docs 100 times...