I've been using my own hand-rolled solution (outside of Webpack) for taking a folder of SVG files, extracting out the contents between <svg></svg>, building a JSON file, and then using that to inject into a React component so I can output specific icons with more control over the surrounding attributes.
I came across https://github.com/gilesa/svg-to-json-webpack-plugin which actually does a lot of the same for me, which is awesome! Something odd happened though when attempting to use it with create-react-app and what I suspect is the Webpack dev server. Whenever I attempt to import the generated .json file, the dev server continually refreshes in the browser.
I go into detail a bit more in the issue I created https://github.com/gilesa/svg-to-json-webpack-plugin/issues/1 but my attempts at debugging exactly what's causing the infinite loop haven't been successful. The Webpack plugin API is pretty great, so I've learned a bit along the way, but no dice thusfar.
Ideally, I'd want Webpack to ignore that specific file if that is what's causing the watcher to kick-off again. Potentially because it's creating a file in the same src directory it is looking for changes to? Thanks for any help in the right direction!
this sounds like a known issuse of #25, try this webpack plugin webpack-mild-compile, it should works.
Related
I’m using next framework version 11.1.2 and I’m quite new to it. Does anyone knows how to maintain the original file names after compile and the pages being served?
Example:
I have an image called: frontend-desktop-logo.png
But after compile, it’s change to: frontend-desktop-logo.f4735b2f97bf9b97dd8bbee4ea16928d.png
I suspect that I need to change something on the next.conig.js file. I’ve tried this configuration:
generateEtags: false,
But didn’t seem to work. My other though would be on applying some change on the webpack configuration. I searched the web for it, but didn’t find anything.
I have had a developer create a website or app in React. This is already on a webserver and does what it should do. Now I want to develop the frontend myself, which would be no problem if I knew how to edit the code.
On the server I have an index.html, some stuff like favicon and a folder. This folder contains the folders "css", "js" & "media" and I don't understand their content. In the folder "css" are for example the files "main.12345.chunk.css" and "main.12345.chunk.css.map" Both look very cryptic.
Now I found out after some research that this is probably a compressed representation. Possibly compressed with Webpack?
But how can I edit these files in a meaningful way and understand what was coded there in the first place? Normally I would just download the file to be changed with Filezilla and edit it with an editor or Visual Studio code, but in this case I have no idea.
Those "cryptic" files are probably minified. Minification is a process where the original code is minified using several approaches, making it much smaller in size and also sometimes better performing. This is done by Webpack with a build process.
Those files are not meant to be develop with (or even read for that matter). Their sole purpose is to be optimized and be run in a production environment. It's very hard or even impossible to understand those, you would basically have to reverse-engineer them to understand what's going on. Many websites actually use minification for this additional bonus of protection of their application logic, because minimization basically obfuscates client side code. For example, the WhatsApp web client written in React is heavily obfuscated, in order to not allow anyone to write a WhatsApp client (there are efforts for this particular example, but it takes lots of time).
TL;DR: You have to get the original source files in order to edit them.
But how can I edit these files in a meaningful way and understand what was coded there in the first place?
They really are not designed for editing.
Edit the original source code to the application, then run its build script and deploy the output from it.
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.
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.
I've created a web page that's for all intents and purposes, a style guide for other developers working on our application.
I have my .scss files within the _sass directory in my Jekyll project, and it's created all the CSS files beautifully. On my page however I want to display the code from these .scss files in the page within some <pre><code> tags.
Currently I have the code in here repeated in both places. When it was quite small it wasn't such a problem, but now it's got bigger it needs DRY-ing out.
I first went down the path of using Jekyll's {% include [path/to/file] %}, and then realised that only works for stuff in the _includes folder, and I couldn't use the include_relative option either as the _sass folder isn't a child of the location it's used.
Secondly I tried using the angular approach, as I'm already using it in my application. Threw in some <pre><code ng-include="'../_sass/components/_sflButton.scss'"> and expected it to work. Of course, it didn't because the _sass folder isn't generated into the actual site when you run it. And I can't seem to find a way of getting it to include it. Tried changing a few things in _config.yml to no avail.
So, TL;DR, I want to either be able to include the code from my _sass folder onto my page via Jekyll, or find a way of getting the _sass folder to be loaded into the generated site so I can load it in with Angular. Am I trying to do an impossible task here? Willing to listen to any suggestions that mean the code is only written in one place.
The theory behind getting this done is as follows:
_sass is a special directory for Jekyll (similar to _layouts, _includes) that is handled differently in comparison to other directories you create. Its contents are not output to the destination directory.
you can write simple ruby programs and add them to a directory called _plugins and Jekyll will run those custom programs during the build process. (Ignored by GitHub Pages).
Now write a ruby program to "read" the contents of _sass and have the resulting data be formatted as a hash and have this hash fed to existing site_payload
The hash can be additionally passed as a Drop instance to have the data available via the Liquid templates.
I concede this answer doesn't actually solve your problem esp., if you're not familiar with Ruby, and Jekyll codebase. but it'll serve as a starting point..