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

Question

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

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?

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]

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