The Setup
I am utilizing https://github.com/labnol/apps-script-starter (contains clasp, babel and webpack) and set it up correctly in order to work on a Google Sheets Addon.
I am using Quokka.js + Node within VS Code for prototyping
The Goal
I started developing sidebars and initial functions and everything works great. Now I want to work with Rest APIs and be able to work with the output both in Node.js as well as in the Google Sheets Addon I am building.
I understand the following premises:
Node doesn't support UrlFetchApp.fetch
GAS doesn't support native fetch (due to lack of the window and dom objects)
So I decided to test out
babel-polyfill (this seems to work fine on its own)
axios (causing issues)
use to handle promises, in order to allow the prototyping in node yet also get the same outcome in the browser.
The Challenge
Within node, everything works as expected, however once I add
const axios = require('axios');
to any .js file in my project I receive the following error when trying to push the code via Clasp.
{ code: 400, errors: [ { message: 'Syntax error: Missing name after . operator.', line: ..., domain: 'global', reason: 'badRequest' } ] }
The given line throwing the error is module.exports.default = axios;
Once I comment out this line, the Clasp push works, but axios isn't working in the GAS environment. (I also tried Fetch Polyfills (like cross-fetch) but run into the same issues)
Any ideas on how to accomplish my goal would be greatly appreciated!
Related
I have a Next JS app with a Page somePage.js. I would like to make an XHR request to the Airtable API from within getServerSideProps. The truncated component is as follows:
pages/somePage.js
import { Component } from 'react';
import Airtable from 'airtable';
export const config = {
runtime: 'experimental-edge',
};
export async function getServerSideProps({ query }) {
Airtable.configure({
endpointUrl: 'https://api.airtable.com',
apiKey: process.env.AIRTABLE_API_KEY,
})
const base = Airtable.base(process.env.AIRTABLE_BASE);
base('someTable').select({...});
return { props: { items: [] } };
}
class SomePage extends Component {
constructor(props) {
super(props);
}
render() {
return (<>...</>);
}
}
export default SomePage;
I get the following error when I do yarn run next dev:
Error: URL is malformed "". Please use only absolute URLs - https://nextjs.org/docs/messages/middleware-relative-urls
This error happened while generating the page. Any console logs will be displayed in the terminal window.
With a stack trace starting in node_modules/next and ending in node_modules/airtable.
The error goes away if I remove airtable related code.
The website linked in the error indicates that URLs must be absolute when used in specific functions (none of which are used in my app in my code, I checked), specifically, in middleware, as in the Next.js middleware paradigm (within a middleware directory, which I also don't have). I assumed the airtable.js library was trying to do some relative query, which I tried to resolve by setting the endpointUrl explicitly, but that didn't solve the issue.
I also tried doing Airtable.configure outside of getServerSideProps, but that didn't change the error.
I checked various other answers on stackoverflow, but their issues all resolved around using middleware, which I don't do, and anyway, their answers didn't seem to be relevant to my issue:
Next JS - Middlewares - Error: URLs is malformed. Please use only absolute URLs : to my knowledge, I'm not making relative URL request
Next JS Middlewares - URLs is malformed. Please use only absolute URLs : same as above
I checked the Airtable API docs, as well as the airtable.js library, but didn't find anything about ensuring all URLs are absolute, nor any helpful tutorials about using next.js with airtable. The tutorials I did find didn't seem to be using airtable in any significantly different way than me.
According to my understanding of the getServerSideProps paradigm of next.js, I should be able to make cross-origin API calls within this function, so I don't see why it would be specifically disallowed.
How can I make API calls to Airtable from within Next JS getServerSideProps?
My versions are as follows:
"airtable": "^0.11.6",
"next": "^13.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webpack": "^4.29.6"
Edit: I have confirmed that literally just importing airtable, or requiring it, causes the error. No need to invoke it.
Edit: This seems to be related to the experimental edge runtime.
This is because the experimental edge runtime is incompatible with the airtable.js library, for various reasons. I don't know the exact cause of the mentioned bug, but basically the experimental edge runtime isn't node, and therefore the airtable library is using incompatible APIs.
See: https://github.com/vercel/next.js/discussions/44843
https://community.cloudflare.com/t/is-the-airtable-js-library-compatible-with-cloudflare-pages/452308/2
Airtable js can be used with nextjs, just not on cloudflare, because cloudflare requires experimental edge runtime for serverside rendered next.js. The deployment solution will have to be able to run the next.js node server if you want to use airtablejs for a serverside rendered app.
I am working on a WPF application that uses the built-in WebBrowser to display Bing Maps. The code can draw polygons on the map, which we are trying to export as KML using the Microsoft.Maps GeoXML module:
Microsoft.Maps.loadModule('Microsoft.Maps.GeoXml', function () {
// Pass in the map to export all data into an XML string
try {
var xml = Microsoft.Maps.GeoXml.write(map, {
xmlFormat: Microsoft.Maps.GeoXmlFormat.kml,
roundLocations: true,
indentChars: ' '
});
}
catch (e) {
alert(e)
}
However, this code gives the following error: Port number should be an integer
I have looked online and can't find anything about what this error means. The Microsoft documentation doesn't seem to require any kind of port number, and the map itself (which supposedly uses the same setup) works fine (aside from a few script errors).
Possibly helpful information
The .htm that we load into the WebBrowser is set up to call methods from a C# helper class. We also sometimes invoke the javascript methods from C#.
The actual map functions properly for the most part, but there is a script error when hovering over the dropdown to select the map type. I'm not sure if this points to a problem in our overall setup or not.
We have nearly identical javascript in our web project, and get no errors. The only difference is the callbacks to our C# class.
Attempted Fixes
I tried to get a stack trace from the error, but it was undefined.
I have used the code at this link to make sure that the web browser is using the proper version of Internet Explorer. However, I don't get these errors running the .htm in Internet Explorer.
I've been messing with the Google Sheets API for a project and everything has been going pretty well. I followed all the steps On this page and got the quickstart working great for a while... Until I ran into an issue where I was getting the error message API returned an error: Error: The request does not have valid authentication credentials.
To resolve this I tried a bunch of different things from changing the SCOPES variable to commenting and uncommenting out things.
Eventually I deleted the project and credentials on my google developers console account and tried to make a new one.
Whenever I start a new folder from scratch, make a quickstart.js file, install the node modules and run it, now I get The API returned an error: Error: unauthorized_client. I've made completely new client_secret.json files and made the quickstart.js from scratch directly using the quickstart walkthrough code and it won't work. What could be causing this?
Link to github (this is the code that WAS mostly working until I tried to delete rows from my google sheet after copying data to my sql database).
You may want to try what was done in this SO post wherein this hidden file has been deleted:
/Users/user/.credentials/gmail-nodejs-quickstart.json
In your case, you need to locate the path of sheets.googleapis.com-nodejs-quickstart.json then delete.
For this, you might need to also do a console.log to locate the correct path.
I have a strange problem over here. I have a project built with Parse.com as a backend (using cloudcode to verify some things when a connection to the database is made). Everything works just as it should do.
But here comes the problem. Another developer reported to me that there is something wrong because he is getting 'undefined' every time he tries to call request.object.get('KEY')in CloudCode. This developer uses the exact same codebase as I do.
So I decided to have a look at it. While with my Parse account, every application works fine (even newly created ones), with the Parse account of the other developer, not a single new application we created seems to work with the exact same code. And it is getting even stranger - creating a completely new Parse account and a new application produces the same errors while my personal account and applications continue to work fine.
So what is the problem? We are using CloudCode, and here is sample code (in javascript) of a beforeSave method:
Parse.Cloud.beforeSave('Activity', function(request, response) {
var currentUser = request.user;
var objectUser = request.object.get('fromUser');
if(!currentUser || !objectUser) {
response.error('An Activity should have a valid fromUser.');
} else {
response.success();
}
});
And every time request.object.get('KEY') returns undefined, for every key I previously defined in the iOS code before uploading the PFObject.
Note that with my personal account everything is fine...
I have already seen this thread, however deleting ACL's didn't do the trick. request.object.get() stays undefined while request.useris defined for every tested Parse account except mine.
EDIT 1
I also had a look at the activity object just before it is uploaded, and there all the fields are properly set.
EDIT 2
After removing the cloud code completely, the objects are correctly being uploaded to Parse, with all the fields being the way they were set via the iOS client. So it seems that something is wrong with Parse's cloud code, but as soon as an object passes through cloud code, it looses all its fields.
Finally I was able to solve this. This is definitely a bug in Parse's Javascript SDK. I changed the Javascript SDK version in the global.json back to version "1.4.2" instead of "latest", uploaded this to the cloudcode folder and everything went back to normal.
You can also test other versions, maybe v1.5.0 is working too, but as soon as I found out v1.4.2 worked fine, I didn't try out more recent versions.
EDIT
So, I discovered, that Parse must have changed something in their command line tool. It seems that the global.json file isn't there anymore if you create your CloudCode folder with the most recent version of their command line tool. However, you can manually create it and upload the complete folder to your Parse app.
This is how my CloudCode folder looks like, just for example:
CloudCode folder contains three subfolders
• cloud - containing cloud code files
• config - containing the global.json file
• public - containing the index.html file
The global.json file contains these lines of code:
{
"global": {
"parseVersion": "1.4.2"
},
"applications": {
"YOUR_PARSE_APPS_NAME": {
"applicationId": "YOUR_APP_ID",
"masterKey": "YOUR_APP_MASTER_KEY"
},
"_default": {
"link": "YOUR_PARSE_APPS_NAME"
}
}
}
Hi I am working on a web application that is implemented in Ext-JS. I deployed the application using Sencha Cmd v3.0.0.250 with command ./make_bootstrap.sh; ./make_compile.sh
No issues during the deployment.
The application can be accessed using the test link //mainApplication/app/index_debug.html or //mainApplication/app (accesses all-classes.js) url....
When the app is deployed it compresses all javaScript files into one file which is all-classes.js. The deployment was successful. But when I access the app from the url ://mainApplication/app/... it shows the following error:
Uncaught TypeError: Cannot read property 'dom' of null all-classes.js:1
Ext.define.initContainerall-classes.js:1
Ext.define.renderall-classes.js:1
Ext.define.doAutoRenderall-classes.js:1
Ext.define.showall-classes.js:1
(anonymous function)all-classes.js:1
TableManager::findTables() content.scripts.c.js:11
However if I access the app using ://myApplication/app/index_debug.html, it works fine. This is for testing purpose and it loads all js files individually unlike accessing through all-classes.js
I have browsed through the web for similar error. But haven't found any at this level. If the application is accessible through index_debug.html why would it not be accessible with the same javaScript files but compressed?
The compressed all-classes.js obviously removes all whitespace and hence it is just a one line code when formatting (using Sublime Text's JSFormatter package) becomes thousands of lines. Since it was one line I couldn't find what the browser is complaining about. I formatted the code and ran the application. And found exactly in which line it failed. It was pointing to an anonymous function. Once I remove the function the app started working... So the tip here is to format the compressed code when debugging in firebug or chrome developer tool.