simple problem that I've seen asked in a few places and seems to have no structured answer. Because of this I though I would start a thread here and maybe get something going that will help everybody!
Diving right into it, I have build a react app using create-react-app, compiling this into a prod version using npm run build it does everything that it needs to and completes successfully.
After all of this we can observe the compiled app having multiple chunks.
All good and well until we enter the app and try to navigate to a different page, where we find it is not loading any other chunks besides the chunks responsible for the first page you access when entering the app.
This is the base problem, I realize I'm not giving any snippets or anything but again, this is because the problem seems very general, there are a lot of people with different applications and code looking for a solution to this and haven't found something practical and normal (having messaged some on forums and such).
If anybody needs any specific information to may case please ask and I will happily provide :)
As far as I can tell, this is webpack related or something like that, webpack from what I understand only includes one chunk and then loads the others as needed, is this correct?
If so and if the chunks are created but not loaded when switching to other pages, then it seems like a webpack issue, but what?
When you, then other developers, create a react app and it contains multiple chunks, do they load well?
Any and all information is appreciated, lets try to tackle this issue!
P.S. If you go into the compiled production build and manually add all the chunks, everything works perfectly. I will try to add any and all information to this thread as I find out more.
Related
I'm new to frontend development and thinking about what's a good way to find source code in our code base for a webpage. What I usually do is going to the element tab in chrome dev tool, finding a special class name, and searching that in code base to locate the file. I feel there should be better way for this task. I tried to use source tab in dev tool, but it shows tons of files and folders in navigation column. I also tried to use Components tab since we're using react, but component names are minified to single letters. So want to get suggestions from you folks. How do you usually do this? Thanks!
You have the right idea, the problem is that you are looking at the minified (presumably production) version of the website. In general, while developing a website, you run a development server, in which all of the code (mostly) appears as it is written in your IDE/editor. That way you can find component names and inspect the source code through the chrome dev tools.
You should talk to whoever is currently responsible for the code to help you get a development server running on your machine. Then, you find the component names and then do a "find in files" search through your IDE/editor to see what they are, and where they are used in the code base. There may be many results that you have to sift through. That's par for the course in large code bases until you become more familiar with what goes where. And even afterwards.
I will say; even things that appear simple can be fiendishly complex, so it would be useful for you if the owner of the code could give you a rough outline of how things are organised and why to make navigating the code base easier. But, it will always be a bit hard, and depending on how clean the code is, it might be nearly impenetrable. Good luck.
There are many ways to to find source code or debug Code
①You can use Chrome dev tool
②You can use debbuger in VS
③you can debug your code by puttin debugger in java script code
④browser has good functionality to find
code(For reference please check Image.)
Been really loving Next so far but I'm running into this issue where my static requests are being duplicated( as per first screenshot below from page speed insights--this is also just a subset of what's happening as it's also duplicating CSS files).
I couldn't figure out why this is happening so I created a fresh new next project and the same issue is happening (screenshot 2 directly from inspecting browser and looking at the individual network requests).
The new project is extremely minimal with barely any code. I made sure that I'm not importing anything twice or in different places. What could be causing this to happen? (For reference, I copied most of the code to Gatsby/Firebase and when I deployed it, this issue doesn't happen even though it's almost exactly identical code).
Any help appreciated. Thanks.
If anyone else runs into this issue, as of this moment this is a bug to do with the automatic preloading prop of the component from Next.js.
I am new to the concept of Localizing my react-application. After doing some research online, It seems as if jsLingui is the best library to use and implement translation on my React application. Following tutorials from https://lingui.js.org/tutorials/react.html , everything seems pretty straight forward. but when I run the command
$ lingui extract , I get the error :
module.js:557
throw err;
Error: Cannot find module 'babel-core'
at Function.Module._resolveFilename (module.js:555:15)
at Function.Module._load (module.js:482:25) .....
I have tried re-installing the babel-core , and it shows installed. Even when I check on my file system, I see the folder as node_modules/babel-core .
I also checked my package.json and I see "babel-core": "^6.26.3" as part of my devDependencies. Please any ideas around this will be helpful.
Beside, the pressing question, I also have a few other questions;
1) In the documentation, I am not sure on where to keep .babelrc file created. I hope it is suppose to be inside my babel-core folder.
2) When I was reading on the jslingui library, I discover that, they are still working on something that will help separate translations to be done page by page. I do not know whether this task is completed or still under development because, I am really interested in this one since my application really big and loading the whole translation at all times might become a real issue.
3) What if I have text in one part of my application which is exactly the same as in another part of my application, is it possible to write it in one section and call the id in another part to give me back the information?? or it is out of scope of the library .
4) I am building a social platform therefore I have information coming from the DB, which I do not know the content therefore such information can not be translated using jslingui just as it is. I will like to introduce some translation to this information( similar to what is happening on Facebook). I know this task needs some serious Artificial intelligence in the areas of natural language processing and machine learning. Please, Any good library that I can use to help my application translate only the portions of data provided to it( definitely information coming from DB)??. I have tried googling on this but I got nothing concrete( NB: I do not want Google Translate because, It will help to translate the whole page + names etc) which will mess-up the user experience of my application
jslingui
Thanks
I have tried re-installing the babel-core , and it shows installed. Even when I check on my file system, I see the folder as node_modules/babel-core . I also checked my package.json and I see "babel-core": "^6.26.3" as part of my devDependencies. Please any ideas around this will be helpful.
If you've installed #lingui/cli globally, please remove it and reinstall locally. If you use Babel 7 (your plugins/preset start with #babel/), then you need to install babel-core#^7.0.0-bridge.0 and #babel/core. Both locally as devDependencies. What also helped in some cases is good old turn it off and on again: rm -rf node_modules and reinstall everything...
1) In the documentation, I am not sure on where to keep .babelrc file created. I hope it is suppose to be inside my babel-core folder.
You should keep it in the root of your repository (next to package.json) unless you have specific needs.
2) When I was reading on the jslingui library, I discover that, they are still working on something that will help separate translations to be done page by page. I do not know whether this task is completed or still under development
It's still under development. However, it's a bit different - it helps you create separate message files, but not automatically. That's something we need to solve in further versinons.
3) What if I have text in one part of my application which is exactly the same as in another part of my application, is it possible to write it in one section and call the id in another part to give me back the information?
You have two options. Either you're using generated message IDs:
// App.js
<Trans>Hello World</Trans>
// Component.js uses the same message
<Trans>Hello World</Trans>
In this case, you only need to translate Hello World once, because messages are grouped when collected from source files.
Other option is that you're using custom IDs:
// App.js - define message
<Trans id="msg.hello">Hello World</Trans>
// Component.js - use message
<Trans id="msg.hello" />
4) I am building a social platform therefore I have information coming from the DB, which I do not know the content therefore such information can not be translated using jslingui just as it is. ...
I can't recommend any approach here, but it seems you need to use a machine translation. Either Google Translate or a better one, if you manage to find it. My guess it'll be either low-quality or expensive because as you said, this isn't a trivial task.
My question is (I think) fairly simple. I am trying to dig into the internals of preact.js and am unsure how to do so. What I mean is, I can get the framework to work fine; I do so via the webpack build from the preact-boilerplate setup. Again, works fine, but there seems to be so much transpiling and source-mapping and hot-loading and whatever the heck else makes these frameworks so quick and fancy that I can't seem to actually intercept the code so I can do boring debugging stuff like console.log and such.
Of course, I can find the preact source code in the node_modules folder; however, this code does not seem to be the one that is actually running/compiling. I suspect this is because everything is being transpiled in real time due to webpack or babel or who knows what. Anyway -- I just want a setup where I can use preact.js but where I can actually access the code. Think of a normal website with a jquery file in a tag. Something like that...and while I know I could theoretically do something like add the preact.js to a script tag on the main index.html page, complications arise due to the babel transpilation and such. And as far as there being some way of doing this via a webpack configuration option, that is beyond my pay grade...but such a configuration option would be fine as well. In a perfect world, I would obviously love to have all the fancy webpack stuff, but since this is all for educational purposes, I'd sacrifice that just for the ability to debug the source code...
This is a strange question in that I am actually struggling to make things simple. I feel like I'm asking to watch TV, but while the place is lousy with 90 inch flat screens, I just need a simple black and white with vacuum tubes. Any help would be appreciated. Thanks very much.
Here is an example repo for using preact without any transpiler:
https://github.com/developit/preact-without-babel
You may want to copy preact from unpkg.com/preact so you can edit it locally.
I've never posted here before so excuse me,
I am developing a test project that can provide a narrow set of information dynamically based on user input. My deployment targets include a select few low power embedded systems.
My application logic is mostly done, but I am having trouble getting ctpp to work correctly with nginx, and I'm afraid its ignorance on my part but I'm tired of banging my head on the wall and its starting to take a toll.
I've got the whole nginx / ctpp / ngx_ctpp2_plugin (or whatever its named) bundle compiling and running, and I can serve html. Getting nginx to serve data from a templating framework seems to be harder than I thought.
I can get ctpp to compile my templates from command line, or by linking some test C code to the ctpp2 library. I cant figure out how to actually serve the data with nginx, I'm getting a "500 internal server error" every time.
Ive already gone pretty far out of my comfort zone on this, my only other experience with a templating framework has been Node/jade. So if you know another way of generating some dynamic data with minimal effort with a small footprint on an embedded system let me know.
TIA
The problem I was having is apparently a result of the plugin requiring an empty json response if it nginx is going to serve anything otherwise it returns a 500 error.
https://translate.google.com/translate?hl=en&ie=UTF8&prev=_t&sl=ru&tl=en&u=http://ngx-ctpp.vbart.ru/
Have yet to see it work, but this is the answer to the current problem.