I am using Gridsome witha Strapi API. I'm using the api.createPates method in gridsome.server.js to get data from the api and generate pages based on that data. The below code seems to be causing a problem:
let localizedOverviewData = {}
if(overviewData.series.localizations?.data) {
overviewData.series.localizations.data.forEach(async locale => {
localizedOverviewData = await axios.get(process.env.API_ENDPOINT_BASE + 'series-info' + query + '&locale=' + locale.attributes.locale, config)
localizedOverviewData = {
series: localizedOverviewData.data.data.attributes,
events: upcomingEvents,
pastEvents: pastEvents
}
createPage({
path: '/' + locale.attributes.locale,
component: './src/templates/Overview.vue',
context: localizedOverviewData
})
createPage({
path: '/' + locale.attributes.locale + '/past-summits',
component: './src/templates/PastSummits.vue',
context: localizedOverviewData
})
})
}
When I build the project I get
Could not generate HTML for "/zh/past-summits/":
Error: Could not resolve /zh/past-summits.
at assets/js/app.0b54624b.js:4308:23
at /Users/VertizonticalStudios/Websites/discovery-website-generator/node_modules/vue-router/dist/vue-router.common.js:2836:23
at /Users/VertizonticalStudios/Websites/discovery-website-generator/node_modules/vue-router/dist/vue-router.common.js:2266:21
at /Users/VertizonticalStudios/Websites/discovery-website-generator/node_modules/vue-router/dist/vue-router.common.js:2404:7
at step (/Users/VertizonticalStudios/Websites/discovery-website-generator/node_modules/vue-router/dist/vue-router.common.js:2003:7)
at step (/Users/VertizonticalStudios/Websites/discovery-website-generator/node_modules/vue-router/dist/vue-router.common.js:2010:9)
at runQueue (/Users/VertizonticalStudios/Websites/discovery-website-generator/node_modules/vue-router/dist/vue-router.common.js:2014:3)
at /Users/VertizonticalStudios/Websites/discovery-website-generator/node_modules/vue-router/dist/vue-router.common.js:2399:5
Any ideas on what the problem is? If I comment out the two createPage functions it works fine.
Ok I found the answer. The issue was using 'async' on my for each loop. Apparently that doesn't work. Switching it to a for loop fixed it.
Related
keycloak-js appears to be appending session data when I refresh my vue3 application: https://my.domain/#/&state={state}&session={session} etc
I wouldn't have a problem with this except it's breaking my site when I refresh due to the incorrect url format.
I can't find where this appears to be trying to append the data in the url from.
Here is a workaround to configure in router configuration. Credits from this thread.
const removeKeycloakStateQuery = (to, from) => {
const cleanPath = to.path
.replace(/[&\?]code=[^&\$]*/, "")
.replace(/[&\?]state=[^&\$]*/, "")
.replace(/[&\?]session_state=[^&\$]*/, "");
return { path: cleanPath, query: {}, hash: to.hash };
};
// ...
{
path: "/:catchAll(.*)*",
component: () => import("src/pages/component.vue"),
beforeEnter: [removeKeycloakStateQuery],
}
It ended up being that keycloak-js appears to conflict with createWebHashHistory in vue-router. I've updated it to just use createWebHistory and now my site is working.
There is logic in keycloak-js that tries to determine if you're in a query string and I found the problem by stepping through that code in parseCallbackUrl.
Example: As stated, I ended up using createWebHistory instead of createWebHashHistory. I made the change in my router/index.js file in the createRouter method passing the history option:
import { createRouter, createWebHistory } from 'vue-router'
/* Other router code here */
const router = createRouter({
history: createWebHistory(), // was createWebHashHistory() with matching import substitution
routes
})
export default router
I am using twilio with twilio-video v beta-2 counting on the master branch of this repohttps://github.com/twilio/video-quickstart-js
I got to display the select media and push the devices into it but when I am trying to updateVideoDevice I got an error
updateVideoDevice error TypeError: track must be a LocalAudioTrack, LocalVideoTrack, LocalDataTrack, or MediaStreamTrack
at Object.INVALID_TYPE (index.js:30952)
at Object.validateLocalTrack (index.js:31469)
at LocalParticipant.unpublishTrack (index.js:17047)
at index.js:17096
at Array.reduce (<anonymous>)
at LocalParticipant.unpublishTracks (index.js:17095)
at index.js:36056
my updateVideoDevice function is as the following
function updateVideoDevice(event) {
const select = event.target;
const localParticipant = room.localParticipant;
if (select.value !== '') {
Video.createLocalVideoTrack({
deviceId: { exact: select.value }
}).then(function(localVideoTrack) {
const tracks = Array.from(localParticipant.videoTracks.values());
localParticipant.unpublishTracks(tracks);
log(localParticipant.identity + " removed track: " + tracks[0].kind);
detachTracks(tracks);
localParticipant.publishTrack(localVideoTrack);
log(localParticipant.identity + " added track: " + localVideoTrack.kind);
const previewContainer = document.getElementById('local-media');
attachTracks([localVideoTrack], previewContainer);
})
.catch(error => {
console.error('updateVideoDevice error' ,error);
});
}
}
can any one explain what I am doing wrong?
Twilio developer evangelist here.
This looks to be a breaking change between Twilio Video JS v1 and v2. In the v2 documentation, calling localParticipant.videoTracks returns a Map of <Track.SID, LocalVideoTrackPublication>. Calling .values() on that map returns an iterator of LocalVideoTrackPublications which is then turned to an array using Array.from.
The issue is that you then pass that array of LocalVideoTrackPublications to localParticipant.unpublishTracks(tracks); which causes the error because unpublishTracks expects an array of LocalTracks not LocalVideoTrackPublications.
You could fix this by mapping over the publications and returning the track property:
const tracks = Array.from(localParticipant.videoTracks.values())
.map(publication => publication.track);
Let me know if that helps.
Electron 3.0.0-beta.1
Node 10.2.0
Chromium 66.0.3359.181
The problem I'm having is importing a module. I created the following protocol:
protocol.registerFileProtocol('client', (request, callback) => {
var url = request.url.substr(8);
callback({path: path.join(__dirname, url)});
});
The output of the protocol is the correct path
"/Users/adviner/Projects/Client/src/ClientsApp/app.js"
I have the following module app.js with the following code:
export function square() {
return 'hello';
}
in my index.html I import the module like so:
<script type="module" >
import square from 'client://app.js';
console.log(square());
</script>
But I keep getting the error:
app.js/:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
I'm done searches but can't seem to find a solution. Can anyone suggest a way I can make this work?
Thanks
This is a tricky question and i will refer to Electron#12011 and this GitHub Gist for a deeper explaination but the core learning is that the corresponding HTML spec, disallows import via file:// (For XSS reasons) and a protocol must have the mime types defined.
The file protocol you use client:// has to set the correct mime-types when serving the files. Currently i would guess they are not set when you define the protocol via protocol.registerBufferProtocol thus you recive a The server responded with a non-JavaScript MIME type of "", the gist above has a code sample on how to do it.
Edit: I just want to emphasize the other answers here do only cover the absolute minimum basics implementation with no consideration of exceptions, security, or future changes. I highly recommend taking the time and read trough the gist I linked.
To confirm: this is there for security reasons.
However, in the event that you just need to get it deployed:
Change "target": "es2015" to "target": "es5" in your tsconfig.json file
Quick Solution:
const { protocol } = require( 'electron' )
const nfs = require( 'fs' )
const npjoin = require( 'path' ).join
const es6Path = npjoin( __dirname, 'www' )
// <= v4.x
// protocol.registerStandardSchemes( [ 'es6' ] )
// >= v5.x
protocol.registerSchemesAsPrivileged([
{ scheme: 'es6', privileges: { standard: true } }
])
app.on( 'ready', () => {
protocol.registerBufferProtocol( 'es6', ( req, cb ) => {
nfs.readFile(
npjoin( es6Path, req.url.replace( 'es6://', '' ) ),
(e, b) => { cb( { mimeType: 'text/javascript', data: b } ) }
)
})
})
<script type="module" src="es6://main.js"></script>
Based on flcoder solution for older Electron version.
Electron 5.0
const { protocol } = require('electron')
const nfs = require('fs')
const npjoin = require('path').join
const es6Path = npjoin(__dirname, 'www')
protocol.registerSchemesAsPrivileged([{ scheme: 'es6', privileges: { standard: true, secure: true } }])
app.on('ready', async () => {
protocol.registerBufferProtocol('es6', (req, cb) => {
nfs.readFile(
npjoin(es6Path, req.url.replace('es6://', '')),
(e, b) => { cb({ mimeType: 'text/javascript', data: b }) }
)
})
await createWindow()
})
Attention! The path always seems to be transformed to lowercase
<script type="module" src="es6://path/main.js"></script>
Sorry Viziionary, not enough reputation to answer the comment.
I've now done it like this:
https://gist.github.com/jogibear9988/3349784b875c7d487bf4f43e3e071612
my problem was, I also wanted to support modules which are imported via none relative path's, so I don't need to transpile my code.
i want to download a file into my ionic-2-app. i use ionic native Transfer plugin with the following script:
let headers = new Headers();
headers.append('TOKEN-NAME', storedtoken);
let url = storedendpoint.apiendpoint + 'path/to/api/force/download/file';
File.resolveLocalFilesystemUrl(cordova.file.applicationStorageDirectory).then((dirEntry) => {
console.log('resolveLocalFilesystemUrl: ', dirEntry);
this.transfer.download(encodeURI(url), dirEntry.nativeURL + filename, true, {headers: headers})
.then((entry) => {
console.log('Transfer: ', entry);
}, (error) => {
console.log('Transfer Error: ', error);
})
});
But i get the following error:
body: "Could not create target file"
code: 1
exception: null
http_status: 200
source: "http://domain/apiendpoint/api/path/to/api/force/download/file"
target: "file:////var/mobile/Containers/Data/Application/XXXXX-YYYYY-WWWW-1234-DSFR45RFDT65T/filename.doc"
The Download works perfectly if i try it in Browser.
ok, found the problem:
cordova.file.applicationStorageDirectory
is read only. it works with
cordova.file.cacheDirectory
I have updated the yeoman generator dependency from 0.18.10 to 0.20.3.
I have updated the deprecated this.dest to this.destinationRoot()
I am now having issues with the generator when it comes to getting the base path of the project, so that I can copy files from one location to another.
I have created a function to put the paths together, this then passes to another function which excludes some files from being copied over.
Here is the function I getting the error with
// Copy Bower files to another directory
var copyBowerFiles = function (component, to, exclude) {
var base = this.destinationRoot(),
publicDir = base + '/' + this.publicDir,
publicAssetsDir = publicDir + '/assets',
bowerComponentsDir = publicAssetsDir + '/bower_components',
bower,
from;
to = (base + '/' + to || publicAssetsDir);
from = bowerComponentsDir + '/' + component;
//this.dest.copy(from, to);
this.bulkDirectory(from, copyDestPathPartial.call(this, to, exclude));
};
This is being called in the end function:
end: function () {
this.installDependencies({
callback: function () {
copyBowerFiles.call('jam', this.publicDir, excludeJamFiles);
}.bind(this)
});
}
I get the error message:
var base = this.destinationRoot(),
^
TypeError: undefined is not a function
I have also tried sourceRoot()
I would like to update my generator to work with the latest version of the generator. Any help getting this working would be great.
Also do you still have to pass this as the first parameter when calling a function?
EDIT:
Here is the copyDestPathPartial function
// Copy destination path partial
var copyDestPathPartial = function (to, exclude) {
exclude = exclude || [];
return function (abs, root, sub, file) {
if (!_.contains(exclude, file) && ! _.contains(exclude, sub)) {
this.copy(abs, to + '/' + (sub || '') + '/' + file);
}
}.bind(this.destinationRoot());
};
When I use this in the copyBowerFiles function I get another error message which says when I call this function:
throw new TypeError('Arguments to path.resolve must be strings');
Is the copyDestPathPartial function not outputting a string?
This is only a JavaScript error, this inside copyBowerFiles is not what you think it is.
With the code you wrote, this is equal to jam.
So here you'd want: copyBowerFiles.call(this, 'jam', this.publicDir, excludeJamFiles);. As the first argument to call is the this value. See documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
That being said, assigning random this value is very dirty and super hard to maintain. Why not making copyBowerFiles a prototype method?