Recently I get to implement Stytch to a React based application. Implementation is pretty simple and strait forward. However got into an error or bug which become a big road block for me.
I tried Googling to find solution, if not even I find similar so that I can debug myself but unfortunately didn't find any. And the big surprise if Stytch GitHub repo link provided on NPM is invalid too.
The problem I'm facing is, it says:
Stytch has not been loaded.
Make sure the script tag exists in the document head:
<script src="https://js.stytch.com/stytch.js"></script>
If using Next.js be sure to load Stytch using the beforeInteractive strategy in pages/_app.jsx:
import Script from 'next/script';
<Script src="https://js.stytch.com/stytch.js" strategy="beforeInteractive" />
I'm following the Stytch doc here: https://stytch.com/docs/sdks/javascript-sdk/email-magic-links/methods
And created a Sample app here: https://codesandbox.io/s/react-stytch-login-auth-xmf5r4
here is the link
just install #stytch/stytch-react using npm.
in the code box you can add through dependencies tab.
just make sure you include the script tag in the public/index.html.
Related
I know I'm a bit behind the times here, but how can I import from this library (uirouter/react-hybrid) for an existing Angularjs site using only tags to include libraries? I have tried a few things, including including from CDN via jsdelivr, also building from node locally and attempting to include the dependencies via webpack. I have also tried loading through require.js but not sure I did it correctly. No matter what, I either get an error for the import or I fail to see the library once imported. I am just not getting it, I feel like I'm missing something. Could someone please help me with a detailed process for how I can get this library to work in place of the existing angular ui-router loaded via tag?
I could definitely go into the reasons why I'm doing this in the first place if necessary, but I feel like this should be pretty simple and I'm just struggling.
Thanks.
I have a index.php with html and script sections. I have few canvas with charts on it and now I need to import plugin 'chartjs-plugin-annotation ' which looks like typical ES6 module. If I used React the solution would be simple, I would just add it to the project with npm. But I don't know how to do it on my site.
I was trying to do this somehow like this, but it didin't worked. Even tried to add type= "module" but it also didn't worked.
<script src="../Chart.bundle.min.js"></script>
where path was like: /chartjs-annotation-plugin/src/annotation.js etc.
Link to plugin on github: chartjs-plugin-annotation.
I'm not very experienced in javascript cause I'm backend dev so this could be also the problem.
Try to do:
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
I have a meteor project where I want to include the conversational form framework.
There is a npm package, however it is not properly imported (probably due to some kind of bug). According to the github issue, this:
import cf from 'conversational-form'
does not work, because the export function exports cf.ConversationalForm, not cf (but cf is needed for existing declarations). The form is created and styled, but cannot be addressed in the js.
I was already able to use the framework in a normal html/js/css project, so now I wanted to just include the external script as a workaround.
However, downloading + importing in client/main.js did not work for me.
I've tried:
import '/imports/api/conversational-form.min.js
as well as:
$.getScript
in Meteor.startup.
Do I need to write specific exports in the external .js? I'm far from a professional, so I'm a little hesitant to dissect the external .js.
Any tips on how to simply mimic the html-script-inclusion? Or other ideas on how to get the framework running?
Sincerely, desperate.
Well Meteor allows you many ways to do that, the first ideas that come to my mind are:
Depending on your project structure you can create your own meteor package as a wrapper and internally load the library.
Hardcoding the script tag in you entry point.(Im not sure if this would work to be honest but you can try).
I ended up downloading the script, modifying it to set my options and including it via \imports.
VERY hacky solution, but well, it works...
Meteor allow you to load external library and scope them in all the client
via the /compatibility folder.
Just put the file in there, and it will be scoped automaticaly.
I've tried reading over the "guide" on their website, and none of it makes sense to me. I thought it'd be the same thing as JQuery, but apparently I'm missing something.
I have this appended in my html document (where it's appropriate of course):
<script src="respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="app.js"></script>
<script type="text/babel" src="app_2.js"></script>
As you might have guessed, I'm using Adobe Dreamweaver to develop my webpage.
That is what the first script element is for. The second being for JQuery.
After running an "example" for ReactJS with JSX, I found the three following script elements in the html document. That, to me, tells me that all I had to do in order to get it working is link those in as well.
Long story short: it didn't work. I tested it on Firefox and Chrome.
The thing I'm still scratching my head over is the error I receive when trying to view the remote files for the ReactJS-related files (on DW):
Not found: package "filename%version"
Where filename is the name of the JS file and version is the version (I'm assuming).
This only occurs for those files and not for JQuery. DW still let's me know that the file is remote and cannot be altered, but I get nothing for the other remote files.
What gives?
I was able to get it working after some scrambling, reading, and random attempts.
Turns out I was getting in my own way.
Because of the tutorial I was learning react from, I had assumed I was required to always create a react object and react-dom object.
After removing those two declarations from my js file, I was able to then see the expected results in my browser.
The only thing I can think of as to why those declarations would cause an issue is either because one of the files I import already does so (which has to happen as I don't declare the "React" or "React-dom" instances anymore but am still able to use them) or it is no longer required explicitly. The tutorial I went through was a bit dated.
I'm gonna have so much fun with this!
I've been playing around with AngularJS - which is a kick-ass front end framework by the way.
Today I tried to incorporate the angular-seed starter app (found here: https://github.com/angular/angular-seed) into a currently existing Rails 3.1.3 application.
Had a few issues getting the demo code - here: http://docs.angularjs.org/#!/tutorial - to work in the asset pipeline, so just for testing purposes I put them into the public folder - old school style.
I followed the tutorial and had all of my views, controllers, services set up correctly. However, when I included the js files at the bottom of my index page:
<script src="angular/app/lib/angular/angular.js" ng:autobind></script>
<script src="angular/app/js/services.js"></script>
<script src="angular/app/js/controllers.js"></script>
... none of the controllers would work. I would get the {{ model.property }} tags within my templates instead of the actual output.
No Javascript errors in Chrome's dev tools - and network and resources showed all expected files loaded properly.
I thought that maybe I had overlooked something in my code, but when I looked at the developers guide, there is a link to angular's cdn:
<script src="http://code.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>
Just for the heck of it, I replaced my local angular.js script call with the cdn, and suddenly everything was working as expected.
I double checked, to make sure that I was loading the local copy from the proper directory, and I was - it's the standard directory that comes with the angular-seed file. This file was also showing as a resource that was downloaded properly.
Anyone have ideas on why the cdn worked but the local copy would not?
The angular-seed uses AngularJS 1.0.0rc5 (currently) which is incompatible with 0.9.19. Check out how the seed app is wired. (e.g. remove ng:autobind and add ng:app or ng-app to the html tag in your layout template).
Looks like you are using an old version: You want to read this: http://docs.angularjs.org/#!/guide/dev_guide.bootstrap.auto_bootstrap
What you should be doing is using the new version, and the docs are here: http://docs-next.angularjs.org/guide/dev_guide.bootstrap.auto_bootstrap
For one thing, you're missing a double-quote in your first script reference.