I am working with React/Webpack 2 etc. I have Karma test runner and when I run my tests I launch Webpack before, and it throws to the console warning output about size etc. (I can't fix it because it is webpack stuff).
How do I can disable these warnings? I tried to set
stats : "none" but it isn't working.
Thanks for any help
WARNING in ./src/modules/Module1/index.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\work\EazeGamesClient\node_modules\babel-loader\lib\index.js!C:\work\EazeGamesClient\node_modules\eslint-loader\index.js?{"fix":true}!C:\work\EazeGamesClient\src\modules\Module1\index.js
* C:\work\EazeGamesClient\node_modules\babel-loader\lib\index.js!C:\work\EazeGamesClient\node_modules\eslint-loader\index.js?{"fix":true}!C:\work\EazeGamesClient\src\modules\module1\index.js
Used by 1 module(s), i. e.
C:\work\EazeGamesClient\node_modules\babel-loader\lib\index.js!C:\work\EazeGamesClient\node_modules\eslint-loader\index.js?{"fix":true}!C:\work\EazeGamesClient\src\routes.js
WARNING in ./src/modules/Module1/containers/Module1.container.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\work\EazeGamesClient\node_modules\babel-loader\lib\index.js!C:\work\EazeGamesClient\node_modules\eslint-loader\index.js?{"fix":true}!C:\work\EazeGamesClient\src\modules\Module1\containers\Module1.container.js
Used by 1 module(s), i. e.
C:\work\EazeGamesClient\node_modules\babel-loader\lib\index.js!C:\work\EazeGamesClient\node_modules\eslint-loader\index.js?{"fix":true}!C:\work\EazeGamesClient\src\modules\Module1\index.js
* C:\work\EazeGamesClient\node_modules\babel-loader\lib\index.js!C:\work\EazeGamesClient\node_modules\eslint-loader\index.js?{"fix":true}!C:\work\EazeGamesClient\src\modules\module1\containers\Module1.container.js
Used by 1 module(s), i. e.
C:\work\EazeGamesClient\node_modules\babel-loader\lib\index.js!C:\work\EazeGamesClient\node_modules\eslint-loader\index.js?{"fix":true}!C:\work\EazeGamesClient\src\modules\module1\index.js
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB).
This can impact web performance.
Assets:
src/containers/Root.container.js (825 kB)
src/containers/Root.container.dev.js (821 kB)
src/store/configureStore.js (629 kB)
src/store/configureStore.dev.js (628 kB)
src/containers/DevTools.js (612 kB)
src/containers/Root.container.prod.js (389 kB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.
Entrypoints:
src/containers/DevTools.js (612 kB)
src/containers/DevTools.js
src/containers/Root.container.dev.js (821 kB)
src/containers/Root.container.dev.js
src/containers/Root.container.js (825 kB)
src/containers/Root.container.js
src/containers/Root.container.prod.js (389 kB)
src/containers/Root.container.prod.js
src/store/configureStore.dev.js (628 kB)
src/store/configureStore.dev.js
src/store/configureStore.js (629 kB)
src/store/configureStore.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using System.import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
P.S. Update 1
webpack.testing.config
let process = require("process"),
autoprefixer = require('autoprefixer'),
precss = require('precss'),
webpack = require("webpack"),
helpers = require("./helpers"),
ExtractTextPlugin = require("extract-text-webpack-plugin"),
CssSourcemapPlugin = require("css-sourcemaps-webpack-plugin"),
srcName = "src";
module.exports = {
entry : {
"vendor" : ["react", "react-dom", "react-router", "redux", "react-router-redux"],
"app" : helpers.root(srcName, "index.js")
},
output : {
path : helpers.root("dist"),
publicPath : "/",
filename : "[name].[hash].bundle.js",
chunkFilename : "[id].[hash].bundle.chunk.js"
},
context : helpers.root(srcName),
module : {
rules : [
{
enforce : 'pre',
test : /\.jsx?$/,
loader : 'eslint-loader',
options: {
fix: true,
},
include: helpers.root(srcName)
},
{
test : /\.jsx?$/,
loaders : [
'babel-loader',
],
exclude : /node_modules/
},
{
test : /\.css$/,
loaders : [
'style-loader',
'css-loader?modules',
'postcss-loader',
],
},
],
},
stats: "none",
devtool: 'inline-source-map',
plugins : [
new webpack.LoaderOptionsPlugin({
options : {
eslint : {
configFile : '.eslintrc',
failOnWarning : false,
failOnError : false
}
}
}),
new CssSourcemapPlugin(),
new ExtractTextPlugin("[name].[hash].css")
],
performance: {
hints: false
}
};
The Yellow warning box in React Native can be both helpful and annoying. There are many errors that can be ignored but end up blocking necessary pieces of the application. To disable the yellow box place console. disableYellowBox = true; anywhere in your application.
Over the past eight years, webpack has become increasingly powerful. However, due to the additional packaging process, the building speed is getting slower as the project grows. As a result, each startup takes dozens of seconds (or minutes), followed by a round of build optimization.
Based on logs, there are two types of warnings
WARNING ... size limit - in order to fix it add to webpack.config
option performance
performance: {
hints: false
}
Recommended disable
hints
in development mode however enable in production mode
WARNING There are multiple modules with names that only differ in casing. - seems this warning related to Windows OS, there is issue
on github where discussed this problem
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With