I'm currently implementing the Monaco Editor from Microsoft (https://github.com/microsoft/monaco-editor), with a plugin for yaml validation, autocompletion, etc. . (https://github.com/remcohaszing/monaco-yaml) in our react js APP.
Maybe it is also important to tell you, that our authentication process gets managed via Keycloak.
When I'm running my code in development (React-scripts start) everything is working as expected.
I can create the editor, the schema gets implemented correctly and autocompletion is also working.
BUT as soon as I try to use the editor in PRODUCTION Build it seems that it cant load my workers correctly, following the editor is not working as it should.
I always get these errors in production:
I tried to use monaco-editor-webpack-plugin with React Rewired but it didnt have an positive effect either.
I also tried to use the worker loader to load the workers, but it also didnt help
Any more Ideas how I can fix this ? Has this to do something with CORS ? Because it tries to load files in a url? Or am I missing something ?
Thanks in advance
What I tried: Monaco Webpack Plugin, plain webpack, worker-loader
Expected Behaviour: Monaco Editor with Monaco Yaml working in production build.
Current behaviour: Working fine in development build, cannot load workers in production.
The problem was, that my keycloak (on a different port) rejected to load the working scripts. After handling this problems, the editor is working fine.
Related
I was trying to integrate a React.js app in Cordova. Everything goes well, but I was not able to debug the app in the simulator. With chrome://inspect it seems like there's no way to do it, because I can only see the "compiled code". Any solution? Thanks
Maybe there is another better way, but what do the trick for me is to build react with some custom files that i took from node_modules/react-scripts/
(i do that, to avoid react eject)
You need all the sources map on your app.
React by default, use a certain webpack config, but that config doesn't work in your phone.
By default, react use this
You can check it on the file node_modules/react-scripts/config/webpack.config.js
What i do, is to build react with the next webpack config
devtool: "eval-source-map",
So you must
Copy these files on your source code and adapt some imports (there are some import with relative path) You only need these two files
node_modules/react-scripts/scripts/build.js
node_modules/react-scripts/config/webpack.config.js
On the first one, modify it to use the second one,
On the second one, add this devtool: "eval-source-map"
Create new task on package.json , new custom build to use the script your custom build.js
Build with this script, and copy all the source maps with your code, and thats it.
The debug could crash sometimes, (i try it also with iphone + safari, sometimes works, sometimes don't so you must keep trying)
On android tend to work in a better way.
The debug is a little bit slow in compare to the web debug.
I hope this works for you too.
(Sorry for my bad English)
I am starting to help someone with a new project. This project is React (React Native as is a mobile app).
The project is working fine on her laptop (in her browser), and when I scan the Expo QR code, the app works fine on my Android device.
However, trying to run it in my browser is throwing all these errors:
The 'Can't resolve' error doesn't make sense, because the correct react native files are there. Is this a cache problem? I have tried deleting the .expo/web/cache folder and starting over.
Also, why are there multiple errors in my console, but only one being shown in the information on the actual web page? Does this mean that the single error being shown is causing all the other errors, or it is the only one which needs fixing, or will it show the next error when I fix the one that is being shown?
Thanks
Seems to have been a known problem re babel. See the links below:
https://github.com/babel/babel-loader/issues/173
how to solve this error You may need an appropriate loader to handle this file type
have very simple sample app which build Create React App + Styled-Components to prove this issue. But I have real big application which I am facing this issue which I am going to explain it below.
I would like to pre-render this app with Rendertron for SEO/GoogleBots and etc. But the problem is when I build PRODUCTION version of React App which use Styled-Components . all the style will be missing on static version which Rendertron produced, but from other side if I try the same workflow with dev-server of app , everything looks fine .
So far I know there is different on PROD version and DEV version of my application when I render it with Rendertron . But I am not sure what cause this issue and how I can fix this issue .
I am looking for solution or idea which can help me to solve this issue .
Here is my sample code which I peppered for test .
https://github.com/AJ-7885/test-styled-component-with-rendertron
Here is screen shot from different version of Rendered version by Rendertron base on PROD or DEV version of the same application .
enter image description here
After a lot of searching around, I finally found out the reason. The Styled Components library uses something called the "Speedy mode" to inject styles on production. This makes the styles bypass the DOM` and be injected directly inside the CSSOM, thus, appearing in the inspector, but totally invisible on the DOM.
Fortunately, Styled Components 4.1.0 came with a fix for this issue! Now you can set a global variable called SC_DISABLE_SPEEDY to true in order to disable the Speedy mode and get the styles to appear on Production as well.
Reference: https://www.styled-components.com/releases#v4.1.0
But the only part I am not sure , how to set disable this Speedy Mode in Create-React-App without Ejecting , Dose any body has any idea ?
You need to render your styles on the server side and inject those styles in your pre-rendered react app. Styled-components explains how to do that here: https://www.styled-components.com/docs/advanced#server-side-rendering
Also, I'd recommend using react-snap for pre-rendering since that is recommended by the Create React App docs. react-snap seems to be more of a React-specific solution that may be easier to implement, especially with styled-components.
I minified/built my app that uses ExtJS 4.2.0 (free version) using Sencha SDK Tools 2.0.0 beta3, and the app was built successfully. However, when I try deleting the old "app" folder containing my old classes, the app no longer works.
I also tried generating a new app using Sencha CMD 4.0.1.45 and then adding my classes, but the results are the same.
I am confused why this happens, because as I understood it, your old classes are not needed to deploy production app. In fact, the only javascript files you need to include in your "index.html" file are "ext.js" and "app-all.js".
I used Firebug and saw in the DOM that the app, along with my classes, are loaded.
I also noticed that "app-all.js" defines classes like this:
Ext.define("MyApp.view.MyClass"...
Is this really how it is supposed to behave? or am I missing something?
Thanks in advance!
Okay, I got it. A .js file in my application calls Ext.require on itself, causing the app wiring go crazy.
I just created a basic sencha app by
sencha generate app --name AndroidDemo --path ../demo
and I viewed it in browser and everything is perfect.
I then followed the instructions here: http://www.sencha.com/blog/android-setup-for-sencha-touch/
and compiled the app with Sencha Cmd and when the emulator opens I only get a blue loading screen.
I also tried compiling/building the app with phonegap on phonegap build site and the build finishes successfully and after loading the app in my andoid device, again I only see the loading page and it stays on this page and the app does not launch.
I'm completely clueless. Need your help friends.
Thanks,
In your app code may be miner syntax error or other error so while app run in emulator check log cat or other option run or app in chrome and check console log. Because loading screen display in case of error as my expression with this.
i'm having the exact same problem..
(currently on windows, btw)
while it's not exactly a solution,
a workaround that i did (out of desperation to see the rest of my app on the emulator):
is to just install it directly to the emulator using the "adb" command.
haven't tried this on a mac, but i'm guessing it's almost the same thing?
after building the app using "sencha" cmd, open cmd/terminal to the build directory.
-assuming you did not change the output location, the apk will be created in your
project root folder under this folder:
"build\native-package-mobile\MYAPPNAME\packager.json\"
make sure the emulator is already running
run the following in command/terminal at the folder where the apk is located:
adb install -r MYAPPNAME.apk
wait for awhile and it should say successfully installed.
run the app in the emulator and hopefully it will go beyond the loading screen.
I don't know why this issue is happening though.
(only started tinkering with android dev/sencha yesterday and it seems to be doing all in it's power to prevent me from running my app. haha)
please share if you find the correct fix for this :)
This usually happens when you build your version and you did not imbed all needed components.
For example, when you use ...
Ext.Image
... in your code.
While running without ...
Sencha app build xxx
... Sencha will grab the component from the touch/src components folder.
But at the time you build the app, it cannot reference to that folder any longer and Sencha will stall.
Please open the console and look out for a warning like this:
[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.MessageBox';
consider adding 'Ext.MessageBox' explicitly as a require of the
corresponding class
You need to add these to the requires section of either App.js or a class where you use the item (here Ext.Messagebox).
Another way to find out what is happening is to run the build code inside the browser and look into the console (so instead of localhost/myapp/index.html you run localhost/myapp/build/{package}/{myapp}/index.html).
There is one other thing that might happen. It’s the scope of async operations.
Like this:
Ext.defer(function() {this.log(‘all good’);}, 500);
this is not the scope of your class.
You need to use:
Ext.defer(function() {this.log(‘all good’);}, 500, this);
Or you might even use ...
Ext.bind()
...to bind the scope to the function.