I am embedding a Salesforce screen flow in my web application using Lighting Out feature. It worked for very basic screen flow with 2 screens but when I used a complex screen flow it is showing me following error:
Screen Flow Error:
This page has an error. You might just need to refresh it. Error during LWC component connect phase: [Error in $A.getCallback() [Cannot read properties of null (reading 'getReference')]] Failing descriptor: {markup://flowruntime:auraField}
I am facing above error while running web application, I can see the flow button but fields are not showing because of above error.
-- Aura Component --
<!-- auraScreenFlow.cmp -->
<aura:component>
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<lightning:flow aura:id="flowScreen" />
</aura:component>
<!-- auraScreenFlowController.js -->
({
init : function(component) {
var flow = component.find("flowScreen");
flow.startFlow("flow_api_name");
}
})
-- Lightning Application --
<!-- auraScreenFlowApplication.app -->
<aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess">
<aura:dependency resource="c:auraScreenFlow" />
</aura:application>
-- Web Application HTML --
<!-- index.html -->
<div id="flow"></div>
<script src="https://myorg.lightning.force.com/lightning/lightning.out.js"></script>
<script>
$Lightning.use('c:auraScreenFlowApplication',
function () {
$Lightning.createComponent(
'c:auraScreenFlow',
{},
"flow",
function (cmp) {
console.log('Created', { cmp });
}
);
},
'https://myorg.lightning.force.com/',
'access-token'
);
</script>
I configured Lightning Out feature properly. Created a Connected App, Saved https://localhost:8081 in CORS setting of my Org, and my web app is running fine. But after loading of Lightning App, Screen Flow only shows button not fields that are in flow.
I searched for solution applied some solutions and still facing same issue.
Please, tell me why I'm facing this problem and How I can fix it?
Thanks.
Related
I need to render the title of a post when it's shared via Facebook or in other apps or messages.
I want Something like this:
However, my posts show the actual title of the application, which is not what I want. When shared, I want the exact title of the posts to be dynamically displayed as per the post's meta-tags, not the main description of my application
Do not want something like in the picture below
Using React-helmet
To render the post's title, I am using React-helmet async to change the title and meta tag as client-side rendering at runtime. The changes are visible during post-inspection but not on the page source (Ctrl + U on the post) and social media shares.
My index.html
<title>my title</title>
<meta
name="description"
content="test description"
/>
My code on one of the pages
<Helmet>
<title>{title}</title>
<meta name='description' content={description} />
</Helmet>
I then wrap app.js with the react-helmet as
<HelmetProvider>
<App/>
</HelmetProvider>
You can replicate the issue (based on react-helmet) from this link:
https://preview-react-helmet-meta-ta.samsara-web.pages.dev/discussions/discussions-details/419
Can this issue be fixed with React-helmet?
React-snap
This is another package that has not been updated in the last four years.
To change the source file, it must be rendered from the server. I used react-snap to pre-render the HTML file, however, got the following issue.
The build folder is ready to be deployed.
19:36:10.984 You may serve it with a static server:
19:36:10.984
19:36:10.984 yarn global add serve
19:36:10.984 serve -s build
19:36:10.984
19:36:10.984 Find out more about deployment here:
19:36:10.985
19:36:10.985 https://cra.link/deployment
19:36:10.985
19:36:11.124 $ react-snap
19:36:13.427 🔥 pageerror at /: SyntaxError: Unexpected token '<'
19:36:13.427
19:36:13.528 ️️️💬 console.log at /: Buffered flag does not support the 'longtask' entry type.
19:36:13.634 ️️️💬 console.log at /: ServiceWorker registration successful with scope: http://localhost:45678/
19:36:13.723 ️️️⚠️ warning at /: got 403 HTTP code for https://accounts.google.com/gsi/client
19:36:13.724 ️️️💬 console.log at /: Failed to load resource: the server responded with a status of 403 ()
19:36:13.733 ️️️💬 console.log at /: An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323
19:36:14.638 ️️️💬 console.log at /: Access to XMLHttpRequest at 'https://cloudflareinsights.com/cdn-cgi/rum' from origin 'http://localhost:45678' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost' that is not equal to the supplied origin.
19:36:14.639 ️️️💬 console.log at /: Failed to load resource: net::ERR_FAILED
19:36:19.024 ✅ crawled 52 out of 52 (/)
19:36:19.083
19:36:19.107 error Command failed with exit code 1.
19:36:19.107 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
19:36:19.127 Failed: build command exited with code: 1
19:36:20.854 Failed: an internal error occurred
My package.json
"scripts": {
"postbuild": "react-snap"
}
My index.js
const MyApp = () => (
<Provider store={store}>
<SWRConfig
value={{
fetcher,
dedupingInterval: 10000,
onError: (error, key) => {
if (error.status !== 403 && error.status !== 404) {
// TODO Implement sentry integration
}
},
onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
if (error.status === 404) return
if (retryCount >= 7) return
setTimeout(() => revalidate({ retryCount }), 5000)
}
}}
>
<ErrorBoundary>
<App />
</ErrorBoundary>
</SWRConfig>
</Provider>
)
const rootElement = document.getElementById('root')
if (rootElement.hasChildNodes()) {
ReactDOM.hydrate(<MyApp />, rootElement)
} else {
ReactDOM.render(<MyApp />, rootElement)
}
On further research, I found that server-side rendering can fix this issue. However, it is challenging to render React apps components server-side. There was a potential solution of using an Express Server with complex configurations, discussed here https://blog.logrocket.com/adding-dynamic-meta-tags-react-app-without-ssr/ .
Currently, I am using React and React-dom version 17.0.2.
One of the example posts one can use for inspection would be https://samsara.social/discussions/discussions-details/215/the-dark-triad-in-primates-mind-machiavellian-inte
or any other post on samsara.social web app.
You have to implement open-graph-tags which has too many types.
<Helmet>
// dynamically creating title and helmet will inject it
<title>{title}</title>
// og stands for open graph
<meta property="og:title" content="Users app" />
</Helmet>
For every article page your meta title and description need to be change with your article title and description so it will render it while you share article links. pass meta tags content properly from your page.
I'm trying to implement a simple banner Ad with Google AdSense inside my React website. I used create-react-app.
I've created a component wrapping the banner:
import React, { Component } from 'react';
class AdBanner extends Component {
componentDidMount () {
(window.adsbygoogle = window.adsbygoogle || []).push({});
console.log('DID IT!!');
}
render () {
return (
<ins className="adsbygoogle"
style={{ display: "block"}}
data-ad-format="fluid"
data-ad-layout-key="-fb+5w+4e-db+86"
data-ad-client="ca-pub-xxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx">
</ins>
);
}
}
export default AdBanner;
And I've added the following script inside the <head> tag of my index.html file
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
## The problem ##
The Ad is not showing up in any way! The compiler is ok and browser does not give any message in the console (apart of 'DID IT!'. I've created the Ad in the console two days ago.
I've tried also deactivating React strict mode.
Thankssssss
When you say ad is not showing up - do you see empty white rectangle where ad should be? Also do you see googleads.g.doubleclick.net/pagead/ads? requests in network tab? If so - how many? If you see 2 then ad requests are made and what might be happening is that AdSense didn't find a good ad, which is normal. You can also try adding data-adtest="on" to the <ins> tag which might help to force an ad.
I'm processing a transaction with Moneris in my React Native app in a WebView. The URL in my WebView contains the credentials of my Hosted PayPage Configuration as URI parameters. When creating that configuration on the Moneris site, I need to provide the URL for the hosted paypage to redirect to once the transaction is complete. When I enter something like https://www.google.ca/ as the callback, it works fine, but I don't know what callback URL I'd need to enter to return to my app.
What I Want To Know:
What is the callback URL I'd need to use in order to return to a React Native app?
WebView is just a component inside your app, so you are never leaving your app. First, confirm that page is rendered in a WebView as opposed to launching browser as a separate app and opening a page there (in this case you can't go back to your app programmatically). Then, if you are actually using a WebView component, you could, for example, do the following: add NavigationState listener to your WebView, and read the url the WebView navigates to and take action accordingly
class MyComponent extends React.Component{
onNavigationStateChange = (navState) => {
if (navState.url === 'https://www.yoursite.com') {
// user just got redirected to requested site
// do something in react-native app now, for example
// close this component and show another one
}
}
render(){
return <View>
<WebView
...
onNavigationStateChange={this.onNavigationStateChange}
/>
</View>
}
}
I have two react web apps (both created using create-react-app) and I would like to deploy them to the same domain on different paths. For example:
myapp.firebaseapp.com/auth
myapp.firebaseapp.com/main
How do I accomplish this?
After searching around in the docs on Firebase under the hosting tab I was able to turn up some suggestions. I believe a Cloud Function might be the best solution for you to accomplish what you're saying (dynamic routing based on the URL).
https://firebase.google.com/docs/hosting/functions
From the link:
Create an HTTP function to your Hosting site Open /functions/index.js
in your favorite editor and replace its contents with the following
code. This will create a simple HTTPS function named bigben.
const functions = require('firebase-functions');
exports.bigben = functions.https.onRequest((req, res) => {
const hours = (new Date().getHours() % 12) + 1 // london is UTC + 1hr;
res.status(200).send(`<!doctype html>
<head>
<title>Time</title>
</head>
<body>
${'BONG '.repeat(hours)}
</body>
</html>`);
});
Direct Hosting requests to your function With rewrite rules you can direct requests that match specific patterns to a single
destination. For example, to direct all requests from the page /bigben
on your Hosting site to execute the bigben function, you would open
firebase.json and add the following rewrite configuration under the
hosting section.
{ "hosting": {
"public": "public",
// Add the following rewrites section *within* "hosting" "rewrites": [ {
"source": "/bigben", "function": "bigben"
} ]
} }
So in your case instead of executing this bigben function you can just use a function to render your app by calling your App() function.
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
I think zeit allows you to have up to 3 different deployments running simultaneously but what you're asking (I believe) is how to add different endpoints to your one firebase app.
I created a React/Typescript project with dotnet new "ASP.NET Core with React.js".
index.cshtml:
<div id="react-app"></div>
#section scripts {
<script src="~/dist/main.js" asp-append-version="true">
</script>
}
boot.tsx(shortened):
function renderApp() {
ReactDOM.render(
<AppContainer>
<BrowserRouter children={ routes } />
</AppContainer>,
document.getElementById('react-app')
);
}
renderApp();
if (module.hot) {
module.hot.accept('./routes', () => {
routes = require<typeof RoutesModule>('./routes').routes;
renderApp();
});
}
How can I pass ASP.Core generated information(the routes from the controllers) to my react/typescript code?
To use server-side rendering in your application, follow the following steps:
1 - Modify App_Start\ReactConfig.cs (for ASP.NET MVC 4 or 5) or Startup.cs (for ASP.NET Core) to reference your components:
namespace MyApp
{
public static class ReactConfig
{
public static void Configure()
{
ReactSiteConfiguration.Configuration = new ReactSiteConfiguration()
.AddScript("~/Scripts/HelloWorld.jsx");
}
}
}
This tells ReactJS.NET to load all the relevant JavaScript files server-side. The JavaScript files of all the components you want to load and all their dependencies should be included here.
2 - In your ASP.NET MVC view, call Html.React to render a component server-side, passing it the name of the component, and any required props.
#Html.React("HelloWorld", new
{
name = "Daniel"
})
3 - Call Html.ReactInitJavaScript at the bottom of the page (just above the ) to render initialisation scripts. Note that this does not load the JavaScript files for your components, it only renders the initialisation code.
<!-- Load all your scripts normally before calling ReactInitJavaScript -->
<!-- Assumes minification/combination is configured as per previous section -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
#Scripts.Render("~/bundles/main")
#Html.ReactInitJavaScript()
4 - Hit the page and admire the server-rendered beauty:
<div id="react1">
<div data-reactid=".2aubxk2hwsu" data-react-checksum="-1025167618">
<span data-reactid=".2aubxk2hwsu.0">Hello </span>
<span data-reactid=".2aubxk2hwsu.1">Daniel</span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="/Scripts/HelloWorld.js"></script>
<script>ReactDOM.render(HelloWorld({"name":"Daniel"}), document.getElementById("react1"));</script>
The server-rendered HTML will automatically be reused by React client-side, meaning your initial render will be super fast.
If you encounter any errors with the JavaScript, you may want to temporarily disable server-side rendering in order to debug your components in your browser. You can do this by calling DisableServerSideRendering() in your ReactJS.NET config.
For a more in-depth example, take a look at the included sample application (React.Samples.Mvc4).
5 - Server-side only rendering
If there is no need to have a React application client side and you just want to use the server side rendering but without the React specific data attributes, call Html.React and pass serverOnly parameter as true.
#Html.React("HelloWorld", new
{
name = "Daniel"
}, serverOnly: true)
And the HTML will look like the one following which is a lot cleaner. In this case there is no need to load the React script or call the Html.ReactInitJavaScript() method.
<div id="react1">
<div>
<span>Hello </span>
<span>Daniel</span>
</div>
</div>