We develop a reactjs application which works fine, but one of our customer wants to load this application inside their vaadin environment.
I thought sending them the reactjs build will be enough but for some reason they cannot load it : they use vaadin 14 and try to load the build script via #JsModule annotation and put a vaadin div component with the correct id (in order for reactjs to bootstrap it) but they say they hava this error :
Uncaught Error: Minified React error #200; visit
https://reactjs.org/docs/error-decoder.html?invariant=200 for the full
message or use the non-minified dev environment for full errors and
additional helpful warnings
I dont know what's is going on here.
Thanks
If you follow that link, you'll see that the full error message is:
Target container is not a DOM element.
It seems likely that when the script ran, the target Div did not exist yet. Using #JsModule means that the Vaadin application will include that module into its Javascript build, and run it as soon as the Vaadin application bootstraps in the browser. At that point in time there isn't anything related to the Vaadin application in the DOM yet.
One thing you could try is to change your script to expose a function (for example using a window global) to render the React application into the Div, rather than have the script render the React application immediately when the script runs. On the Vaadin side, your customer could then call that function as soon as the target Div has been added to the DOM, for example using executeJs in the components onAttach method.
Related
I've created an ASP.NET MVC Core 2 application with an Angular 6 front-end. When it works, it works, but when I make an error in some template code, for instance creating an empty span in app.component:
<span />
Everything will compile and Angular will run, but it will remain stuck on the basic "loading" page defined in index.html. There's no error anywhere in the browser's developer tools, and none in Visual Studio's various output windows. As soon as I fix the offending tag:
<span></span>
and save the document, the page reloads and everything works.
Where are errors like these reported so that I can find them?
Try running the ng build --prod command this will give you a more exact location of where errors are.
I have a React app based on the starterkit of Erik Rasmussen from here.
The app works pretty well, using React Router and Redux.
Since my Rails app is pretty old, the idea to embed the application, is to have a separate controller where the index action renders an iFrame, which itself loads it's content from the same controllers show action.
Therefore I can stick with my Rails app's layout, and have the React apps markup rendered w/o any changes.
After I transpiled the app via
$> npm run build
I copy the main-.js and main-.css files into the Rails app, so they can be delivered from there.
Afterwards I start the React app via:
$> npm run start
and request the starting page via curl. The curl output goes into my show erb template. Inside I change the URL's where the main JS and CSS is loaded from.
When I request my index page now, the iFrame loads it's content, the app seems to initialize, but does not work at all. I see rendered content, but clicking on links leads to Rails routing errors. So the clicks seem not to be intercepted by React.
I tried to track execution down, and ended up debugging the code in client.js. It seems like, ReactDOM.render receives proper arguments, meaning, there is a proper looking component to render, a store, and even the destination element.
Currently I get the following error in the console:
Uncaught ReferenceError: _classCallCheck is not defined
I am using a slightly oder version of the starterkit, which embeds initial data into the markup, but I was not able to figure out, why the _classCallCheck works in the React app, but stops working, when embedded into Rails.
Even the most recent version of the starterkit does not work either. In that case I do not get any error at all, but have the same behavior.
Due to the old Rails version I can not use the React Gem, and I need some of the functionality the starterkit provides out of the box, so changing this one, is no option either.
Any hints?
I'm using Eclipse 4.2, appengine-java-sdk-1.8.9, gwt-2.5.1, smartgwt-4.0p
I'm trying make the simple project like this - http://uptick.com.au/content/create-gwt-project
but offline.
When I save page (as html page) it doesn't work offline and I receive alert - "GWT module may need to be (re)compiled".
My question is: how to change project to save it as html page (plus project_name_nocache.js file).
Thanks.
You might be getting this error message because you might be trying to run/debug your application in compiled mode. In order to do so, you need to re-compile your application for GWT after every single change in code.
To avoid this, you should run/debug your application in developer mode.
See this link, to have idea on how to run GWT application in dev mode.
I tried the approach of using Form-Builder-Generated-Form within Java application suggested here < Running Orbeon-Form-Builder-Generated-Form with Java Application > : downloaded Orbeon nightly build, created a sample form using Form Builder and copy & pasted it into JSP page in my app. However, when I try to access this JSP, it redirects me to: /myapp/fr/unauthorized . Can you please tell me what I maybe doing wrong? Or what is the right way of making Orbeon process Form Builder generated content in Java app?
For my deployment I followed separate deployment and configuration specified in Orbeon documentation. Thanks in advance.
You are not doing anything wrong, but Orbeon Forms doesn't support this type of form deployment.
The separate deployment mode runs the output of your JSP directly through the XForms engine.
Form Builder-generated forms OTOH expect pre-processing via the Form Runner runtime, in particular through the components.xsl XSLT transform. This is needed to support all the Form Runner features, including built-in persistence, error summary, internationalization, etc.
Currently the cleanest way to integrate such forms with your own app is to just run them side by side (Orbeon WAR + your own WAR) and navigate between each other via links and POSTs.
You could also use an iframe, although that is often a disliked solution.
You could also transform the form produced by Form Builder into plain XForms that doesn't assume Form Runner. It wouldn't be too hard to do but would be outside the scope of this StackOverflow question.
I have an app that runs fine using android phonegap 1.2 and jqm 1.0, and I'm attempting to port it to windows phone 7.5.
When the index.html page loads, the first thing is does is use a $.mobile.loadpage to load another html page. all i get on the wp7.5 app is the 'error loading page' message flash up briefly. if i put an href to the page on index.html i get the same error. to summarise:
running the index.html in a desktop browser works
running the app on android works
running the app on wp7.5 without calling another page works
jqm in ie (on wp7.5) can load other pages
if i link to a public jqm site from within the app, the public site works (ie jqm will load pages that are located on the www)
i have put $.support.cors = true; in the js code to enable cross site xhr requests
it seems to me that the only issue is when jqm tries to load a local file via ajax. i assume this has something to do with default security settings in the webbrowser control that phonegap uses?
can anyone shed any light on this?
I suspect this is WP7's insistence that all pages loaded from the "local website" are actually loaded from IsolatedStorage.
In the newer Phonegap / Cordova WP7 project templates there is a file maintained per build, CordovaSourceDictionary.xml which will do this for you.
Just make sure that whatever files you want to be able to navigate to / load (yes, you have to do it for images too) have a Build Actiion of "Content" in your project and when you build it, this xml will be updated automatically.
When your app runs the first thing Cordova does on WP7 is go through all the files in this XML file and copy them to isolatedStorage so they can be loaded / navigated to.