230

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?

0

12 Answers 12

185

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} }
]
4
  • 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
    Commented Dec 28, 2015 at 1:11
  • 6
    @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
    Commented Aug 3, 2016 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
    Commented Aug 15, 2016 at 10:56
  • Does compaction effect performance?
    – coler-j
    Commented Nov 8, 2022 at 13:49
58

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?

5
  • 1
    Weird, I see same message (also for ramda), although I do exclude: /node_modules/. Commented Oct 28, 2015 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
    Commented Oct 28, 2015 at 18:07
  • My bad. I was checking wrong config. The actual one didn't have exclude. Commented Oct 29, 2015 at 19:04
  • I found this answer better. Thanks @mhelvens Commented May 9, 2020 at 16:56
  • It works,so we should exlude /node_modules/, i exclude also /dist/ for any case.Upvoted. Commented Sep 23, 2021 at 11:20
29

Either one of the below three options gets rid of the message (but for different reasons and with different side-effects I suppose):

  1. exclude the node_modules directory or explicitly include the directory where your app resides (which presumably does not contain files in excess of 100KB)
  2. set the Babel option compact to true (actually any value other than "auto")
  3. 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
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
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"]
}
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
    Commented Jan 4, 2017 at 17:34
  • Came looking for this :)
    – informer
    Commented Oct 9, 2018 at 7:12
  • Thanks, I had the exact same thing
    – Henkie85
    Commented May 26, 2020 at 7:18
6

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.

4

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;
});
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>
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...

2
  • 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
    Commented Mar 5, 2020 at 4:12
  • 1
    Not sure why this was downvoted, this was exactly my issue. Thanks shmuel!
    – Aron
    Commented Apr 16, 2020 at 4:03
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
     }
},
1

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'],
      },
1
  • same error, and exclude: /node_modules/ fix the problem thanks
    – LXG
    Commented Feb 12, 2022 at 20:35
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/],
0

It indicates that your code generator (likely a JavaScript bundler like Webpack or a JavaScript minifier) has encountered a large amount of styling information, and it has deoptimized or altered the way it's handling this information due to its size.

To solve it, Minify your CSS code to reduce its size. You can use a tool like cssnano to automatically minify your CSS.

npm install cssnano --save-dev

Then, use it in your build process, for example, with Webpack:

const cssnano = require('cssnano');

module.exports = {
  // ... other webpack config settings
  plugins: [
    // ... other plugins
    new MiniCssExtractPlugin(),
    new OptimizeCSSAssetsPlugin({
      cssProcessor: cssnano,
      cssProcessorPluginOptions: {
        preset: ['default', { discardComments: { removeAll: true } }],
      },
    }),
  ],
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.