ForkTsCheckerWebpackPlugin out of memory (Solution) - reactjs

It took me awhile to find a solid answer for this so I figured I would put the solution on here. Upgrading node caused an issue when I would save in React as my project was running. As it was reloading it would get this error.
Type checking and linting aborted - probably out of memory. Check `memoryLimit` option in ForkTsCheckerWebpackPlugin configuration.
I would have to stop the host and run npm start everytime. All the solutions online said to increase the memory, but they don't say where and neither does the documentation. It would not be an issue if the wepback.config wasn't such a big file like mine is so its hard to understand where this code is implemented.

The Solution:
Open your webpack.config file and find this area, then add the memoryLimit (for me it was not there by default) and specify a new amount (I doubled it just to be safe) and then save the file and you should be good to go!
new ForkTsCheckerWebpackPlugin({
async: false,
watch: paths.appSrc,
tsconfig: paths.appTsConfig,
tslint: paths.appTsLint,
memoryLimit: 5000,
}),

Another idea:
If your project is not huge (or it has used to work in the past), then chances are high that you are linting/compiling the folders that are not supposed to. (e.g. /dist or any folder that has compiled artifacts.)
I would recommend running tsc and eslint individually (preferably with - debug option) to see if they are doing their job properly and only compiling/linting the source code.

Related

Apache Flink - set plugin folder for local development from IDE (IntelliJ IDEA)

Is it possible to override the location of Apache Flink's plugins folder to a local development environments folder in order to load them from the IntelliJ IDEAs IDE?
I tried to set the env. variable in the Run/debug configurations:
FLINK_PLUGINS_DIR="c:\flink-plugins\"
println("PluginsDir " + PluginConfig.getPluginsDir)
The output is:
WARN org.apache.flink.core.plugin.PluginConfig [] - The plugins directory ["c:\flink-plugins\"] does not exist.
PluginsDir Optional.empty
Does anyone know how to load Apache Flink plugins from an IDE?
TL;DR: When running locally in an IDE Flink uses a MiniCluster with LocalEnvironment or TestEnvironment (for unit tests). Unfortunately, it seems these do not utilize the local environment variables even if they are set, and there is no way to configure them otherwise.
I ran into the same problem wanting to run Flink in my IDE (VS Code) and have plugins. I used (scala) sys.env.get(ConfigConstants.ENV_FLINK_PLUGINS_DIR) to verify the environment variable was set correctly. Additionally, I consulted a unit test in Flink's source and found two things: First, despite setting the environment variable the value in PluginConfig was still the default. Second, overriding the value as is done in the unit test doesn't prevent the error due to plugin not found but it does change the return value of PluginConfig.getPluginsDir. This is probably because the plugins dir must be set at startup for the plugins to be found and loaded.
Looking in Flink documenation it appeared that the environment could be configured, but my attempt didn't work.
val conf: Configuration = new Configuration();
conf.setString(ConfigConstants.ENV_FLINK_PLUGINS_DIR, "C:/Users/ivwebber/Source/MDPLocal/private/MapsAI/projects/TrafficInference/Modules/traffic-forecast-pipeline/plugins/");
val env = StreamExecutionEnvironment.createLocalEnvironment(1, conf);
I think the problem with this approach is that it's not a value that could be set in conf/flink-conf.yaml. I looked in the source and found that the value is never copied to the resultant config. See here too.
This question may be related.
This question may be related.
I probably spent more time than it's worth looking into it, so I think filing a feature request/bug would be the next step. Considering that the token "ENV_FLINK_PLUGINS_DIR" only shows up 4 times in the source; I actually wonder if its never read or used.

Expected a string, got object gatsby-plugin-prettier-eslint Gatsby

I am trying to learn Gatsby and I included prettier-eslint plugin with a common configuration. You can see my configuration, the files, etc
When I try to add a css file I get this error:
Have you tried using the following?
eslint: {
patterns: "**/*.{js,jsx,ts,tsx}",
customOptions: {
fix: true,
cache: true,
},
},
The eslint pattern seems to be a string, not an array according to the plugin's example.
This seems to be an unresolved issue of the plugin, according to this opened issue (from a week ago), so keep an eye on that stack trace to see how it evolves. If the dependency has a bug when using the defaults (and suggested) configuration, there's nothing you can do except making a PR if you are able to spot the bug in the source code or wait for the resolution.
I had the same issue. Turns out you must have a prettier config (.prettierrc or similar) set up. Check to make sure you have a config as mentioned in the Prettier docs.

Reduce size/number of files being downloaded from EXTJS app

I used Sencha CMD to build an app and want to ensure that I'm only downloading what is required for the app to run. I have read some places that the way to do this is by using the Required [] clause to only include the required classes, however I don't think I understand this clearly. For example I have a page that has an {xtype: 'grid'} within it, but I haven't put Requires : [ 'Ext.grid.Panel' ], yet it still displays properly. In my mind if I haven't included the requires, and CMD is doing what I think it should, this page should fail to load because Ext.grid.Panel wasn't included. The fact that it's working is making me think that CMD is automatically including it for me, but what else is it automatically including and potentially bloating the download? How can I ensure that I'm only downloading what's required for the app to run?
I found the answer to my problem. I was developing my app on the same server that I'm serving it from, and when I was running "sencha app build production", it's putting all of the "build" files into a separate directory. I was assuming the microloader/bootstrap process was then going to look in that directory but I guess that's not how it works. I had to then copy those "build" files to a new directory and include my index.html and bootstrap.js in the new directory and then it appears to work, only loading the required files. It's certainly not clear anywhere that this is what's required. Hopefully this will help anyone else having the same issue.

Redux + React understanding size of webpack bundle

I read various answers like this regarding reducing the bundle size. First I wanted to understand what is going on with my 13MB bundle, so I've installed the Webpack Bundle Size Analyzer. It generated this output:
There are a few things I don't understand:
Why is react appearing twice with two different sizes?
How come it doesn't add up to 13MB? (it's around 4.75MB)
Does this means my own code is only 4KB? (last line)
Is it possible to understand from this tree how to save KBs? I mean, for instance, is there a way to use only parts of lodash or is it required as a whole by React?
Update:
Found the answer for #1. React-color requires ReactCSS which requires a different version of react and lodash. Without React-color my bundle dropped from 13MB to 8MB. I will try to find a way to re-use react and lodash.
It seems that you have eval-source-map devtool option in your webpack config file, that's why you are getting such huge bundle size. This way, sourcemaps are putting inside of bundle js file.
Try to change this option to source-map to build source maps separately.
// webpack.config.js
{
devtool: 'source-map',
// ... other options
}
1) Sometimes other dependencies require again lodash and / or react, so these dependencies are pulled in multiple times by webpack (usually happens when the version differs), here the DedupePlugin should help. The final bundle size also depends on your devtool entry in webpack, so in development it is usually much bigger as you probably have sourcemaps enabled and a your build is not optimized. Hard to tell without your actual webpack config.
2) Maybe webpack is already deduping?
3) last line says 400KB
4) You can definitely save a few kbs. A good way to start is using lodash-webpack-plugin with babel-plugin-lodash, this will import only the lodash methods you are actually using instead of the complete library. You can also just require the bits you need from material-ui as outlined in this answer.
I recently added the webpack-dashboard to my webpack config, so I instantly see the output and percentages that make up my bundle size, so maybe you think twice about adding huge dependencies if you don't really need them.

App Engine - Remove file change detection from dev_appserver log

In a recent SDK update, it seems that Google has added a INFO level log into the dev_appserver that prints out each and every time a file change is detected.
This, in my opinion, just clutters up the log with information I already know thus I don't want it to be printed out on my console.
INFO 2014-11-27 09:52:43,876 module.py:391] [default] Detected file changes:
/Users/michael/app/templates/home
/Users/michael/app/templates/home/index.html
Is there any way to remove these lines from the log? Since this is a INFO level log, I can't really remove the INFO from the log_level as other INFO logs come in handy many times...
Any suggestions?
It's now an issue on the App Engine issue tracker. Vote it up for quicker resolution.
https://code.google.com/p/googleappengine/issues/detail?id=11662
This issue started to bug me also, so here's my quick-fix until devs find more permanent solution:
in path-to-SDK\google\appengine\tools\devappserver2\module.py comment out lines 424-426.
424 # logging.info(
425 # '[%s] Detected file changes:\n %s', self.name,
426 # '\n '.join(sorted(file_changes)))
Just have to remember to do it again when the build changes, if they don't fix it. (I'm working with 1.9.20 atm) (:
As Derek Perkins pointed out, this was sent to the App Engine Issue tracker. Since I had the same problem I starred the issue. I was happily surprised to see it was actually sent up to engineering and they updated the tracker today with a workaround. I rewrote parts of it and added a bit of formatting :)
Root cause of the problem
The main reason behind why every file in a project's folder is tracked is because the reload logic is naïve and has no way of knowing which files are actually being in use.
In the event that some data file contents are changed, but only loaded at module import time (for instance templates in some frameworks), it's difficult for the devserver to accurately detect such changes.
Workaround for Git and Mercurial
If you put your project folder anywhere but the root of your git repo, it will make all the .git files appear outside of your project's dir, so the changes to the files should not be seen and therefore shouldn't trigger a webserver reload. For instance build your project's structure this way :
myproject/
myproject/.git/
myproject/.gitignore
myproject/myapp/
myproject/myapp/app.yaml
myproject/README
Then run the devserver inside of myproject/myapp instead of "myproject".
There is also a mention that this has been tested on Git and Mercurial, but it won't work on CVS or SVN.

Resources