Beta3

[maydinbil]

after Beta 3 update
I have this error my nuxtjs project (SPA mode working error only universal mode)

SyntaxError
Unexpected token <

[cagatay.civici]

Could you please provide more information? How can we replicate?

[maydinbil]

Create a nuxt app witt npx create-nuxt app project
Project type spa(single page app) or universal.(We have problem at universal this server side project)

Than install primevue

Than pluging folder add primevue.js

import Vue from 'vue';
import 'primevue/resources/themes/nova-light/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css';
import '@mdi/font/css/materialdesignicons.min.css'
import 'nuxt-material-design-icons'


import AutoComplete from 'primevue/autocomplete';
import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';
import Button from 'primevue/button';
import Calendar from 'primevue/calendar';
import Card from 'primevue/card';
// import Chart from 'primevue/chart';
import Checkbox from 'primevue/checkbox';
import Chips from 'primevue/chips';
import DataView from 'primevue/dataview';
import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions';
import Dialog from 'primevue/dialog';
import Dropdown from 'primevue/dropdown';
// import Editor from 'primevue/editor';
import Fieldset from 'primevue/fieldset';
import FileUpload from 'primevue/fileupload';
import InputSwitch from 'primevue/inputswitch';
import InputText from 'primevue/inputtext';
import Listbox from 'primevue/listbox';
import Menu from 'primevue/menu';
import Message from 'primevue/message';
import MultiSelect from 'primevue/multiselect';
import OverlayPanel from 'primevue/overlaypanel';
import Paginator from 'primevue/paginator';
import Panel from 'primevue/panel';
import Password from 'primevue/password';
import ProgressBar from 'primevue/progressbar';
import Rating from 'primevue/rating';
import RadioButton from 'primevue/radiobutton';
import SelectButton from 'primevue/selectbutton';
import Slider from 'primevue/slider';
import Sidebar from 'primevue/sidebar';
import SplitButton from 'primevue/splitbutton';
import Spinner from 'primevue/spinner';
import Textarea from 'primevue/textarea';
import Toast from 'primevue/toast';
import ToastService from 'primevue/toastservice';
import Toolbar from 'primevue/toolbar';
import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
import ToggleButton from 'primevue/togglebutton';
import TriStateCheckbox from 'primevue/tristatecheckbox';
import ValidationMessage from 'primevue/validationmessage';

import './../assets/layout/layout.scss';

Vue.use(ToastService);
Vue.component('Accordion', Accordion);
Vue.component('AccordionTab', AccordionTab);
Vue.component('AutoComplete', AutoComplete);
Vue.component('Button', Button);
Vue.component('Calendar', Calendar);
Vue.component('Card', Card);
// Vue.component('Chart', Chart);
Vue.component('Checkbox', Checkbox);
Vue.component('Chips', Chips);
Vue.component('DataView', DataView);
Vue.component('DataViewLayoutOptions', DataViewLayoutOptions);
Vue.component('Dialog', Dialog);
Vue.component('Dropdown', Dropdown);
// Vue.component('Editor', Editor);
Vue.component('Fieldset', Fieldset);
Vue.component('FileUpload', FileUpload);
Vue.component('InputSwitch', InputSwitch);
Vue.component('InputText', InputText);
Vue.component('Listbox', Listbox);
Vue.component('Menu', Menu);
Vue.component('Message', Message);
Vue.component('MultiSelect', MultiSelect);
Vue.component('OverlayPanel', OverlayPanel);
Vue.component('Paginator', Paginator);
Vue.component('Panel', Panel);
Vue.component('Password', Password);
Vue.component('ProgressBar', ProgressBar);
Vue.component('RadioButton', RadioButton);
Vue.component('Rating', Rating);
Vue.component('SelectButton', SelectButton);
Vue.component('Slider', Slider);
Vue.component('Sidebar', Sidebar);
Vue.component('Spinner', Spinner);
Vue.component('SplitButton', SplitButton);
Vue.component('TabView', TabView);
Vue.component('TabPanel', TabPanel);
Vue.component('Textarea', Textarea);
Vue.component('Toast', Toast);
Vue.component('Toolbar', Toolbar);
Vue.component('ToggleButton', ToggleButton);
Vue.component('TriStateCheckbox', TriStateCheckbox);
Vue.component('ValidationMessage', ValidationMessage);


and than nuxt config js

plugins: [
'~/plugins/primevue',
],

than npm run dev
But browser show this error.
When nuxt config change mode: 'spa', not give error

Thans

[mert.sincan]

Hi @maydinbil,

Could you please try it after adding the following options to nuxt.config.js?

Code: Select all

plugins: ['~/plugins/primevue.js'],
build: {
    transpile: [/primevue/]
}

[maydinbil]

build: {
transpile:[/primevue/],
extend(config, ctx) {
}
}

Than warning after run dev

WARN Compiled with 3 warnings friendly-errors 09:28:41
WARN in ./resources/plugins/primevue.js friendly-errors 09:28:41
"export 'default' (imported as 'AutoComplete') was not found in 'primevue/autocomplete' friendly-errors 09:28:41 friendly-errors 09:28:41
WARN in ./node_modules/primevue/components/listbox/Listbox.vue?vue&type=script&lang=js& friendly-errors 09:28:41
"export 'default' (imported as 'DomHandler') was not found in '../utils/DomHandler' friendly-errors 09:28:41 friendly-errors 09:28:41
WARN in ./node_modules/primevue/components/dropdown/Dropdown.vue?vue&type=script&lang=js& friendly-errors 09:28:41 "export 'default' (imported as 'ObjectUtils') was not found in '../utils/ObjectUtils'

and Browser this error end warning

vendors.app.js:72371 Uncaught ReferenceError: exports is not defined
at Module../node_modules/primevue/components/utils/ObjectUtils.js (vendors.app.js:72371)
at __webpack_require__ (runtime.js:791)
at fn (runtime.js:151)
at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/primevue/components/autocomplete/AutoComplete.vue?vue&type=script&lang=js& (vendors.app.js:2414)
at __webpack_require__ (runtime.js:791)
at fn (runtime.js:151)
at Module../node_modules/primevue/components/autocomplete/AutoComplete.vue?vue&type=script&lang=js& (vendors.app.js:67469)
at __webpack_require__ (runtime.js:791)
at fn (runtime.js:151)
at Module../node_modules/primevue/components/autocomplete/AutoComplete.vue (vendors.app.js:67413)
./node_modules/primevue/components/utils/ObjectUtils.js @ vendors.app.js:72371
__webpack_require__ @ runtime.js:791
fn @ runtime.js:151
./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/primevue/components/autocomplete/AutoComplete.vue?vue&type=script&lang=js& @ vendors.app.js:2414
__webpack_require__ @ runtime.js:791
fn @ runtime.js:151
./node_modules/primevue/components/autocomplete/AutoComplete.vue?vue&type=script&lang=js& @ vendors.app.js:67469
__webpack_require__ @ runtime.js:791
fn @ runtime.js:151
./node_modules/primevue/components/autocomplete/AutoComplete.vue @ vendors.app.js:67413
__webpack_require__ @ runtime.js:791
fn @ runtime.js:151
(anonymous) @ vendors.app.js:67186
./node_modules/primevue/autocomplete.js @ vendors.app.js:67187
__webpack_require__ @ runtime.js:791
fn @ runtime.js:151
./resources/plugins/primevue.js @ app.js:7330
__webpack_require__ @ runtime.js:791
fn @ runtime.js:151
./.nuxt/index.js @ app.js:3538
__webpack_require__ @ runtime.js:791
fn @ runtime.js:151
(anonymous) @ app.js:1881
./.nuxt/client.js @ app.js:2955
__webpack_require__ @ runtime.js:791
fn @ runtime.js:151
0 @ app.js:9804
__webpack_require__ @ runtime.js:791
checkDeferredModules @ runtime.js:46
webpackJsonpCallback @ runtime.js:33
(anonymous) @ app.js:1
commons.app.js:21558

vendors.app.js:80791 [HMR] bundle 'client' has 96 warnings
vendors.app.js:80792 ./resources/plugins/primevue.js 56:30-42"export 'default' (imported as 'AutoComplete') was not found in 'primevue/autocomplete'./node_modules/primevue/components/listbox/Listbox.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/listbox/Listbox.vue?vue&type=script&lang=js&) 219:27-37"export 'default' (imported as 'DomHandler') was not found in '../utils/DomHandler'./node_modules/primevue/components/sidebar/Sidebar.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/sidebar/Sidebar.vue?vue&type=script&lang=js&) 58:69-79"export 'default' (imported as 'DomHandler') was not found in '../utils/DomHandler'./node_modules/primevue/components/sidebar/Sidebar.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/sidebar/Sidebar.vue?vue&type=script&lang=js&) 75:22-32"export 'default' (imported as 'DomHandler') was not found in '../utils/DomHandler'./node_modules/primevue/components/sidebar/Sidebar.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/sidebar/Sidebar.vue?vue&type=script&lang=js&) 85:8-18"export 'default' (imported as 'DomHandler') was not found in '../utils/DomHandler'./node_modules/primevue/components/sidebar/Sidebar.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/sidebar/Sidebar.vue?vue&type=script&lang=js&) 92:8-18"export 'default' (imported as 'DomHandler') was not found in '../utils/DomHandler'./node_modules/primevue/components/sidebar/Sidebar.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/sidebar/Sidebar.vue?vue&type=script&lang=js&) 99:8-18"export 'default' (imported as 'DomHandler') was not found in '../utils/DomHandler'./node_modules/primevue/components/splitbutton/SplitButton.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/splitbutton/SplitButton.vue?vue&type=script&lang=js&) 83:67-77"export 'default' (imported as 'DomHandler') was not found in '../utils/DomHandler'./node_modules/primevue/components/splitbutton/SplitButton.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/splitbutton/SplitButton.vue?vue&type=script&lang=js&) 93:6-16"export 'default' (imported as 'DomHandler') was not found in '../utils/DomHandler'./node_modules/primevue/components/dialog/Dialog.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/dialog/Dialog.vue?vue&type=script&lang=js&) 60:69-79"export 'default' (imported as 'DomHandler') was not found in '../utils/DomHandler'./node_modules/primevue/components/dialog/Dialog.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/dialog/Dialog.vue?vue&type=script&lang=js&) 77:22-32"export 'default' (imported as 'DomHandler') was not found in '../utils/DomHandler'

[mert.sincan]

Thanks a lot! I just tried Button component. It worked fine for me. I checked other components.

Thanks a lot for the update again;)

[maydinbil]

Any progress?

[leventsa]

Solving with plugin configuration

Code: Select all

plugins: [{ src: '~/plugins/primevue', ssr: false }],

[cagatay.civici]

Glad to hear, we'll also provide a nuxt sample to our github repo to demonstrate usage with nuxt.