What does The code generator has deoptimised the styling of some file as it exceeds the max of 100KB mean

Question

I added a new npm package to my project and require it in one of my modules   Now I get this message from webpack   build modulesNote  The code generator has deoptimised the styling of  D  path to project node modules ramda dist ramda js  as it exceeds the max of  100KB    What does it mean  Do I need to take some action

User · Answer

in webpack 4 with multiple module rules you would just do something like this in your  js rule          test      js          loader   babel-loader        options              presets    es2015          or whatever           plugins   require  babel-plugin-transform-class-properties        or whatever           compact  true       or false during development

User · Answer

In react redux webpack babel build fixed this error by removing script tag type text babel  got error    lt script type  text babel  src   js bundle js  gt  lt  script gt    no error    lt script src   js bundle js  gt  lt  script gt

User · Answer

This is related to compact option of Babel compiler  which commands to  not include superfluous whitespace characters and line terminators  When set to  auto  compact is set to true on input sizes of  100KB   By default its value is  auto   so that is probably the reason you are getting the warning message  See Babel documentation   You can change this option from Webpack using a query parameter  For example   loaders          test     js    loader   babel   query   compact  false

User · Answer

Either one of the below three options gets rid of the message  but for different reasons and with different side-effects I suppose     exclude the node modules directory or explicitly include the directory where your app resides  which presumably does not contain files in excess of 100KB  set the Babel option compact to true  actually any value other than  auto   set the Babel option compact to false  see above     1 in the above list can be achieved by either excluding the node modules directory or be explicitly including the directory where your app resides   E g  in webpack config js   let path   require  path         module         loaders                            loader   babel             exclude  path resolve   dirname   node modules          or by using include  path resolve   dirname   app     again in webpack config js     2 and  3 in the above list can be accomplished by the method suggested in this answer or  my preference  by editing the  babelrc file  E g      cat  babelrc         presets     es2015    react         compact    true     Tested with the following setup     npm ls --depth 0   grep babel  -- babel-core 6 7 4  -- babel-loader 6 2 4  -- babel-preset-es2015 6 6 0  -- babel-preset-react 6 5 0

User · Answer

This seems to be a Babel error  I m guessing you use babel-loader  and are not excluding external libraries from your loader test  As far as I can tell  the message is not harmful  but you should still do something like this   loaders          test     js    exclude   node modules   loader   babel        Have a look  Was that it

User · Answer

This is maybe not the case of original OP question  but  if you exceeds the default max size  this maybe a symptom of some other issue you have  in my case  I had the warrning  but finally it turned into a FATAL ERROR  MarkCompactCollector  semi-space copy  fallback in old gen Allocation failed - JavaScript heap out of memory  the reason was that i dynamically imported the current module  so this ended up with an endless loop

User · Answer

For more explanation read THIS LINK  it is option of Babel compiler that commands to not include superfluous whitespace characters and line terminators  some times ago its threshold was 100KB but now is 500KB   I proffer you disable this option in your development environment  with this code in  babelrc file          env            development               compact   false                   For production environment Babel use the default config which is auto

User · Answer

For those who s working with latest webpack and has options property on there configuration  You cannot use query and options at the same time  You will get this error if both is present Error  Provided options and query in use  Instead  add new property to options name generatorOpts  then add the property compact under it  loaders         test     js    loader   babel   option    generatorOpts    compact  false          And for those who s working with next  like me   You need to do something like this config module rules filter  rule    gt  rule use  amp  amp  rule use loader      next-babel-loader    map  loader    gt        loader use options generatorOpts     compact  false        return loader

User · Answer

I tried Ricardo Stuven s way but it didn t work for me  What worked in the end was adding  compact   false to my  babelrc file          compact   false       presets     latest    react    stage-0

[webpack] What does "The code generator has deoptimised the styling of [some file] as it exceeds the max of "100KB"" mean?

Examples related to webpack

Examples related to babeljs