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?

Ricardo Stuven · Accepted Answer · 2015-11-23T19:36:48.673

177

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} }
]

edited Nov 23 '15 at 19:36

answered Apr 24 '15 at 20:59

Ricardo Stuven

4,704
2
34
36

17

And if you have multiple loaders, you can use `?compact=false` instead of the `query` parameter. For example: `{test: /\.js$/, loaders: ['ng-annotate', 'babel?compact=false']}` – kendsnyder Dec 28 '15 at 01:11
5

@Ricardo Stuven but why would i change it to false? seems like a positive thing to "not include superfluous whitespace characters and line terminators" – omriman12 Aug 03 '16 at 12:30
2

@omriman12 It depends on how you're going to use the output. If it's a production build which is going to be minified, then there's no value in setting this parameter to `false`. For cases like mine where the format of the output is important, that has value. Like most things, it depends. :) – Ben Aug 15 '16 at 10:56
Does compaction effect performance? – coler-j Nov 08 '22 at 13:49

score 57 · Answer 2 · edited Dec 05 '22 at 23:38

57

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?

edited Dec 05 '22 at 23:38

tanguy_k

11,307
6
54
58

answered Apr 24 '15 at 18:10

mhelvens

4,225
4
31
55

1

Weird, I see same message (also for ramda), although I do `exclude: /node_modules/`. – Roman Pominov Oct 28 '15 at 10:50
Same path, also? Maybe your external library is located elsewhere? If not, you could also try Ricardo's solution. This problem is not very critical. – mhelvens Oct 28 '15 at 18:07
My bad. I was checking wrong config. The actual one didn't have `exclude`. – Roman Pominov Oct 29 '15 at 19:04
I found this answer better. Thanks @mhelvens – Mosia Thabo May 09 '20 at 16:56
It works,so we should exlude /node_modules/, i exclude also /dist/ for any case.Upvoted. – Goran_Ilic_Ilke Sep 23 '21 at 11:20

score 28 · Answer 3 · edited May 23 '17 at 11:55

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

score 13 · Answer 4 · answered Nov 09 '16 at 10:19

13

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"]
}

answered Nov 09 '16 at 10:19

Yusinto Ngadiman

176
1
3

1

Using babel 6.5.x, webpack 2, I had the same message but for `lodash.js`, and this fixed the issue. – phil_lgr Jan 04 '17 at 17:34
Came looking for this :) – informer Oct 09 '18 at 07:12
Thanks, I had the exact same thing – Henkie85 May 26 '20 at 07:18

score 6 · Answer 5 · edited Jan 03 '22 at 13:58

For more explanation read Babel Options - compact, 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.

score 4 · Answer 6 · answered Oct 23 '20 at 08:02

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) => rule.use && rule.use.loader === 'next-babel-loader')
.map((loader) => {
    loader.use.options.generatorOpts = { compact: false };
    return loader;
});

score 2 · Answer 7 · answered Jul 25 '16 at 20:22

2

In react/redux/webpack/babel build fixed this error by removing script tag type text/babel

got error:

<script type="text/babel" src="/js/bundle.js"></script>

no error:

<script src="/js/bundle.js"></script>

answered Jul 25 '16 at 20:22

Vitaliy Kotov

3,412
1
14
5

shmuel friedman · Answer 8 · 2019-09-06T14:49:58.770

2

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...

edited Sep 06 '19 at 14:49

answered Oct 28 '18 at 12:43

shmuel friedman

81
6

It was a symptom for me - I started removing/adding my imports to try and track it down. The offending script was using a dynamic require(`require('../../../' + a + '/' + b)`). Removing it solved the issue (and it shall never return). – Frank Mar 05 '20 at 04:12
1

Not sure why this was downvoted, this was exactly my issue. Thanks shmuel! – Aron Apr 16 '20 at 04:03

score 1 · Answer 9 · edited Feb 07 '19 at 17:59

1

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
     }
},

edited Feb 07 '19 at 17:59

YakovL

7,557
12
62
102

answered Dec 13 '18 at 19:38

steev

916
10
24

score 1 · Answer 10 · answered Feb 11 '22 at 13:32

This is my babel configuration:

module.exports = {
  presets: [['@babel/preset-env'], ['@babel/preset-react']],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3,
      },
    ],
    // react hmr
    ['react-refresh/babel'],
  ],
};

I also met this problem because these code:

    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3,
      },
    ],

And finally I solved this problem by add

exclude: /node_modules/

in

      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },

same error, and exclude: /node_modules/ fix the problem thanks — LXG, Feb 12 '22 at 20:35

score 0 · Answer 11 · answered Apr 14 '21 at 04:44

0

I had the same issue with video.js, Adding that specific package fixed the issue for me.

exclude: devMode ? /node_modules/ : [
/node_modules\/video.js/, /@babel(?:\/|\\{1,2})runtime|core-js/],

answered Apr 14 '21 at 04:44

Piet van Leeuwen

319
3
12

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

11 Answers11

Linked