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?
Either one of the below three options gets rid of the message (but for different reasons and with different side-effects I suppose):
node_modules
directory or explicitly include
the directory where your app resides (which presumably does not contain files in excess of 100KB)compact
to true
(actually any value other than "auto")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]
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?
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"]
}
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
.
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
}
},
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...
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;
});
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>
Source: Stackoverflow.com