Hydrogen: "handleRequest is not a function" error - server-side-rendering

Using swiperjs/barba.js in Hydrogen framework, I cannot import them into client components.

Related

how to import Papa-Parse in browser's console

Currently, I'm trying to build a web scraper and facing an issue in exporting CSV files. Can anyone help me with how can I import PapaParse into the console? I tried with traditional method but it gives the following error
Uncaught SyntaxError: Cannot use import statement outside a module

Error #types/signalr/index.d.ts is no ta module

I'm trying to use signalr with Typescript. Server side is ASP.NET (not ASP.NET CORE) I installed both signalR (https://www.npmjs.com/package/signalr) and #types/signalr (https://www.npmjs.com/package/#types/signalr).
My import looks like this:
import * as signalR from 'signalr';
The problem is I got an error: "File '... /node_modules/#types/signalr/index.d.ts' is not a module.
Not sure what to do about this. It's only with signalR library I have this problem.
Simply using import 'signalr' worked.

Firebase JS SDK warning while load application in browser (angular v5)

When application load in browser, it gives following warning. So unable to create build for prod (ng build --aot --prod)
It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.
For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):
CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');
ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';
I am using following configurations
Angular CLI: 1.5.0
Node: 9.8.0
Angular: 5.1.3
"firebase": "^5.0.4",
"angularfire2": "^5.0.0-rc.10"
Please guide where I get wrong.
There is nothing really wrong, it is more a warning and a best practices tip.
Firebase is composed of different services/modules, e.g. the Real Time Database, Firestore, the Auth service, etc.
In the majority of projects one does not use ALL those services and therefore this warning indicates that instead of importing all the services with one global import it is better to only import the services you really need in your application. In such a way, your build will be optimized: the resulting build file(s) will only contain the Firebase SDK code that you need and will not contain the parts that are not used.
See this documentation item: https://firebase.google.com/docs/web/setup and in particular the part that says:
If you are using a bundler like Browserify or webpack, you can just
require() the components that you use.
Update following your comment:
With the import keyword, you should do as follows:
import messaging from 'firebase/messaging';
You did not share your Angular component code that's why I could not give you specific code. However, I guess, you include Firebase directly like this then it will show following warning.
import * as firebase from 'firebase'; // It will throw warning
import * as firebase from 'firebase/app'; // It will not throw any warning
Then include specific package acccording to your need.
import 'firebase/firestore';
import 'firebase/database';
import 'firebase/auth';
I add following code, it works for me
require("firebase/messaging");

Receiving and error for https in react-native

I am receiving the following error message:
error: bundling failed: Error: Unable to resolve module 'http' from
'some/path/to/iugu.js': Module 'http' does not exist in the Haste module map
I'm following this documentation for using iugu:
https://github.com/iugu/iugu-node
var iugu = require('iugu')(
'fa484a7c14ff046c6f1c589d2f0c389b',
'latest'
);
That module is not fully compatible with React Native.
Some node modules are automatically available via require() like http, crypto, etc. These modules are available in Node, but they are not automatically available in other environments such as browsers and in this case React Native.
To use your package seems that you need to include a compatible http implementation.
There are some ways to kind of "Nativeify" those modules and to include those node core libraries in React Native. Take a look to ReactNativify and also this article Using Core Node JS Modules in React Native Apps.

conditional compilation in Flex (Actionscript) and import statements

I have a web application written in Flex and I'm trying to build an AIR application from the same code base using conditional compilation.
In the AIR application, I need to have import statements such as the following:
import flash.data.SQLConnection;
import flash.filesystem.File;
but I cannot have these import statements in the web application because they are AIR only classes.
I thought I could use conditional compilation to overcome this issue but then I read the following on page http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7abd.html:
"You cannot use constant Boolean values to conditionalize metadata or import statements."
If that's the case, how can I have common codebase for Flex based web as well as desktop applications? Has anyone solved this conundrum?
Thanks,
Dilip
More on this question after some trials and errors...
I have 3 projects in Eclipse for this project... one for web application, one for AIR application and one for the common source code. In the web and AIR project, I point to the common source code. In the common code, I used conditional compilation and it looks like you can do something like the following:
CONFIG::desktopMode {
import flash.data.SQLConnection;
import flash.events.SQLEvent;
import flash.events.SQLErrorEvent;
import flash.filesystem.File;
}
and similar approach to include web or AIR specific functions during compilation. The approach seems to have worked so far!
The only place I have run across issues is in my Cairngorm's model locator. If I put CONFIG::desktopMode around import statements in Cairngorm's model locator, it starts giving "Uncaught exception in compiler" or "1131 classes must not be nested" error. I'm not sure how to address this error!
Dilip
You can avoid imports referring fully qualified class names in code. This way you can use conditional compilation.
A common 'codebase' isn't really the situation. Your common codebase is the views and such, but from your Flex to your Air application, your business layer changes. For this, I would recommend you create 2 different projects (one for web, the other for air) and have a library project for all common components, classes, whatever, that can be shared between the two.
It's impossible to have a class like you're saying that says 'if flex, only use this code; if air use this one' since the air SDK adds extra functionality and just saying 'import this' won't work because you also need to remove all references to that import which makes it unreadable.
You need to architect your project properly so that you can separate and abstract out most classes so they can be used for both projects, and then within each project have their specific implementation. Using an application framework like Parsley might help you to accomplish this; I know it helped me.
You can always switch to some full preprocessor like M4 and build your program using normal build tools and not the IDE.

Resources