So, i have this component that use Vue.compile:
import Vue from 'vue'
.
.
.
const res = Vue.compile(this.template)
this.templateRender = res.render
This works in development environment but not in production.
In production it's returning this error:
TypeError: n.default.compile is not a function
I don't know exactly what is happening.
Can someone help me?
I'm using Nuxt v2.15.8 with Vuetify v2.6.12.
I've tried others libs, like the vue-template-compiler v2.6.14, and a lot more stuff.
Related
when I try to using pdfjs in vue for review PDFfile, I get this error, has anyone can tell me how to solve that
here is my code:
const pdfjsLib = require('pdfjs-dist/legacy/build/pdf.js')
pdfjsLib.GlobalWorkerOptions.workerSrc =
'https://mozilla.github.io/pdf.js/build/pdf.worker.js'
pdfjsLib
.getDocument("../assets/pdf/活動切結書.pdf'")
.promise.then((doc) => {
console.log(doc)
})
https://support.neat.com/neatapp/error-the-api-version-does-not-match-the-worker-version
I find this solve, that say clear your cookie, and I follow it, but doesn't solve my error
The only thing that helped me was replacing the link:
<script src="~/js/libs/pdf.js"></script>
to
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
P.S. I must complete my answer. Having dealt with the error myself, I can say: your 'pdfjs-dist/legacy/build/pdf.js' points to the downloaded library in the project folder, and the second 'https://mozilla.github.io/pdf.js/build/pdf.worker.js' points to the library on the network and their versions differ. It is required to equalize them.
We have a vuejs 2 project.
We needed some function of dayjs.
We abstracted the dayjs into a single utility file and following the guide ended up with this:
import { i18n } from '#/plugins/i18n';
import dayjs from 'dayjs';
import calendar from 'dayjs/plugin/calendar';
dayjs.extend(calendar);
export default async (date: Date, locale?: string): Promise<string> => {
import(`dayjs\locales\${locale}`)
const time:any = i18n.t('datetime.dict');
return dayjs(date).locale(userLocale).calendar(null, {
lastDay: `[${time.yesterday} ${time.at}] LT`,
sameDay: `[${time.today} ${time.at}] LT`,
nextDay: `[${time.tomorrow} ${time.at}] LT`,
lastWeek: `[${time.last}] dddd [${time.at}] LT`,
nextWeek: `dddd [${time.at}] LT`,
sameElse: 'LLLL'
});
};
The app works perfectly fine, but vuejs is outputting every single langauge file from dayjs as a chunk and also adding the prefetch script tag to the index.html.
Has anyone else hit this issue and is the above code snippet wrong or should there be a more precise import?
Here is a screenshot of only some of the dayjs chunks.. each is completely the same with different langauge strings in... but we didn't even import the locale setting options yet.
#MichalLevý gave the direction to the answer to this issue.
Essentially, webpack cannot know which single file to import when you say:
import(`dayjs\locales\${locale}`)
So.. it just creates a js chunk for every single file it finds. Which is not overly bad on its own.
When you combine this behaviour with vue-cli's default prefetch behaviour, this is when things get bad... the result is that every single chunk that webpack creates ends up being a "pre-fetched" line in the HTML head in the outputted index HTML file.
So when there is 400 chunks from a dynamic import (in this case locales from dayjs) then there is a prefetch for all of them.
It depends on your setup but.. for us, the app is also a PWA so there is effectively no requirement for prefetching as the PWA will also download... in fact it doubles the downloads.
The answer for us was to be more specific on the prefetch:
https://cli.vuejs.org/guide/html-and-static-assets.html#prefetch
And also, as we only needed a few languages, import only what was needed but being specific and not passing a variable to map to a path
I have an npm library which imports Angular FullCalendar v5 and everything works fine there. When i try to import my project library to another project and try access the full calendar frontend I got a warning and a message error in my browser console:
- Warning: main.js:7358 Unknown option 'default'
- Error: core.mjs:6476 ERROR TypeError: Language ID should be string or object.
at new DateTimeFormat (<anonymous>)
at buildNativeFormattingFunc (main.js:1218)
at NativeFormatter.buildFormattingFunc (main.js:1211)
at NativeFormatter.buildFormattingFunc (main.js:1009)
at NativeFormatter.format (main.js:1154)
at NativeFormatter.formatRange (main.js:1169)
at DateEnv.formatRange (main.js:3984)
at CalendarDataManager.buildTitle (main.js:6909)
at CalendarDataManager.buildTitle (main.js:1009)
at CalendarDataManager.updateData (main.js:7113)
I can't figure it out why but i know it's in this line of code at main.js (#fullcalendar/common/main.js)
Line 1218 -> var normalFormat = new Intl.DateTimeFormat(context.locale.codes, standardDateProps); The error is that the variable context.locale.codes is undefined.
Can anyone help?
I've just had the same error. Not that I was importing a project library of my own but I was importing the Fullcalendar library (from node_modules). I had enabled localization using the locale property of the calendar options but I always got this error Language ID should be string or object.
Two things was wrong:
I was importing the locale code incorrectly which resulted in this error. The current version of Fullcalendar (6.0.0) has all its locale code under #fullcalendar/core/locales.
I was using dynamic import like this: import("#fullcalendar/core/locales/da") and it worked fine but I had to access the default property of the exported object. Using async/await syntax it becomes:
const localeModule = await import("#fullcalendar/core/locales/da");
const calendar = new Calendar(someElement, {
(...),
locale: localeModule.default
});
Not directly answering your question but it sounds like you're using locale, too, and your other project is importing your project library in a way that makes the default property of the module containing the locale code undefined.
I am trying to create a new app in vue.js. Basically just wanting the same output from cybersource microform node.
https://github.com/CyberSource/cybersource-flex-samples-node
In my vue project main.js
import cybersourceRestApi from '../node_modules/cybersource-rest-client';
var instance = new cybersourceRestApi.KeyGenerationApi(configObj);
I am encountering an error with its dependencies. There's a lot missing but here's first 3 examples
ApiClient in ./node_modules/cybersource-rest-client/src/index.js
api/CaptureApi in ./node_modules/cybersource-rest-client/src/index.js
api/ConversionDetailsApi in ./node_modules/cybersource-rest-client/src/index.js
Error
I have been trying to use publicRuntimeConfig / privateRuntimeConfig
On nuxt 2.4.1, I have defined my runtime config as follows on nuxt.config.js
publicRuntimeConfig: {
DATA_API_HOST_URL: process.env.VUE_APP_DATA_API_HOST_URL,
},
privateRuntimeConfig: {
AUTH_APP_CLIENT_SECRET: process.env.VUE_APP_AUTH_APP_CLIENT_SECRET,
},
and calling it as follows on my login.vue
asyncData( ctx ) {
console.log(ctx.$config.DATA_API_HOST_URL)
//some activity
}
The keys are showing up on $config inside asyncData. I debugged on chrome dev tools. But value is not read from process.env.VUE_APP_DATA_API_HOST_URL. The value is showing up as undefined. However, process.env.VUE_APP_DATA_API_HOST_URL is showing the value OK. The whole point is to move away from process.env.
this.$config.DATA_API_HOST_URL also does not access the values.
'${DATA_API_HOST_URL}' is shown in examples but I believe it is only for explicit param declarations at asyncData like asyncData( { $config : {DATA_API_HOST_URL}).
When I pass values as it is using DATA_API_HOST_URL: process.env.VUE_APP_DATA_API_HOST_URL || 'https://test.api.com', it seems to copy the value fine using ctx.$config.DATA_API_HOST_URL!
Looking to me like copying process.env to *RuntimeConfig has a problem!
What is the recommended way of importing and using runtime configurations?
As per documentation in the Nuxt blog post you marked, the feature your are trying to use is released in 2.13 (you´re using 2.4 if i not misunderstood). That could be the reason behind the behaviour you're seeing.
I'd recommend update your project dependencies or trying another approach.
I think you should use Docker to set dynamic runtime config like link below:
https://dev.to/frontendfoxes/dockerise-your-nuxt-ssr-app-like-a-boss-a-true-vue-vixens-story-4mm6