I'm trying to build my react library however it fails on mode: production. When I import my library to another application I get the following message:
Uncaught TypeError: Cannot set property props of #<TWithProps> which has only a getter.
Followed by:
The above error occurred in the <_class3> component
The problem is that it does seem to bundle up my library, however when importing the bundled libary, I get the 2 errors above. Additionally This does not happen in development mode.
I tried following many guides, however they all lead to the same result. My first assumption is that it's likely due to my minimizer plugin (I've tried both UglifyPlugin and TerserPlugin) however that is not the case. I've also read on webpack's documentation that it should use the minimizing plugin if given one. However it doesn't seem like it?
This is my webpack
module.exports = {
mode: 'production',
entry: {
index: [
'babel-polyfill',
'./src/index.js',
],
},
output: {
path: srcBuild,
filename: '[name].js',
chunkFilename: '[name].[chunkhash].js',
libraryTarget: 'commonjs',
libraryExport: 'default',
},
optimization: {
noEmitOnErrors: true,
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true,
terserOptions: {
mangle: false,
compress: {
reduce_funcs: false,
reduce_vars: false,
keep_classnames: true,
keep_fnames: true,
keep_fargs: true,
pure_getters: true,
},
},
}),
],
}
I'm expecting my library to run just fine as it does in mode: development.
May I ask how are you consuming your library from the other application? You have libraryTarget: 'commonjs' in your config. If you don't know how your clients will consume your library, the suggested option is to set the export to umd by setting libraryTarget: 'umd'.
This should allow you to use ES6 import or just require it, webpack or the other app's bundler will take care of resolving them.
Solved it by adding this plugin
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
Related
I'm running react with HMR using webpack. When a function is deleted in a server or used shared service is deleted, no errors are emitted, neither in the console nor on the terminal.
This error can not be seen even during the build process.
I've waisted at least a day trying to find a solution for it. Any help is appreciated.
thank you.
const DEV_SERVER = {
contentBase: PATHS.public,
hot: true,
open: true,
hotOnly: true,
historyApiFallback: true,
overlay: true,
port: 3000,
// stats: 'verbose',
// proxy: {
// '/api': 'http://localhost:8888'
// },
More Details
if i have user.service.ts imported in an index.ts file and use in all the other files, then i delete the user.service.ts file.
Expected Behaviour: An error with module not found.
Current Behaviour: Nothing is showing in the console or terminal.
React v 16.13
Webpack v 4.41
Check the source maps used, this worked for me:
devtool: 'cheap-module-source-map'
Did you try the error-overlay-webpack-plugin?
const ErrorOverlayPlugin = require("error-overlay-webpack-plugin");
module.exports = {
plugins: [new ErrorOverlayPlugin()]
);
https://www.npmjs.com/package/error-overlay-webpack-plugin
I try to migrate one of my project building from browserify to webpack. It's AngularJS#1.7 project and I have multiple bundles: core with AngularJS and its dependenciy imports and other specific lazy-loading modules with its specific dependencies. So I have multiple entry points but I only load core.js script in index.html. Another modules resolve while routing by my resolver.
One of the lazy-loading modules imports AngularJS and it leads to duplicate code and WARNING: Tried to load AngularJS more than once. I want to Webpack check if modules were imported in core and load them from it.
I made it work but need to import one extra file common-vendors.js in index.html.
My config:
export default {
context: path.resolve(__dirname, './src/app'),
//...
entry: {
'core': './core/core.module',
'back-office': './back-office/back-office.module',
'front-office-1': './front-office-2/front-office-2.module',
'front-office-2': './front-office-3/front-office-3.module'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'www')
},
mode: config.env,
optimization: {
splitChunks: {
cacheGroups: {
'common-vendors': {
test: /[\\/]node_modules[\\/]/,
name: 'common-vendors',
chunks: 'initial',
minChunks: 2
}
}
},
runtimeChunk: {name: 'core'},
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {mangle: false}
})
]
},
plugins: [
new CompressionPlugin()
]
}
If you know a better solution, feel free to comment.
I am currently using webpack 4 with react loadable to create chunks.
It actually chunks depends on the break point. However, vendor size remains same. React loadable is not supporting webpack 4 yet ? or I am missing some setup ?
css actually seems to splited into the chunk, though
{
output: {
path: 'tothe path',
publicPath: `/publicPath/`,
filename: '[name] + '.js',
chunkFilename: '[name]',
},
resolve: {
extensions: ['.js', '.json', '.css'],
alias: aliases
},
stats: {
warnings: false,
children: false,
},
optimization: {
splitChunks: {
chunks: "all",
name: true,
cacheGroups: {
common: {
name: "vendor" + ".js",
test: /[\\/]node_modules[\\/]/,
chunks: "all",
enforce: true,
reuseExistingChunk: false,
},
}
}
}
}
React-loadable doesn't work well with Webpack 4 yet,
take a look at this pull request.
There's a fork of react-loadable (by the author of PR),
but it didn't work for me either. I had a problem that some components wrapped in Loadable won't load.
#Bohdan Other
I also ran into this problem.
I found that the components can't load all import style. If I remove the style, the component will load normally.
I move all the styles to the entry file as a workaround.
I have finished my ReactJS app and I want to put it in production. I run next command: webpack --progress -p but in chrome F12 I get next error: index.js:1 Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See WebSiteFbReactJs for more details..
It is my webpack.config.js:
'use strict';
const WEBPACK = require('webpack');
const PATH = require('path');
const CopyFiles = require('copy-webpack-plugin');
const BaseName = "/upct";
module.exports = {
resolve: {
extensions: ['', '.js', '.jsx']
},
context: __dirname,
entry: {
app: ['./src/index.jsx']
},
output: {
path: PATH.join(__dirname, '/public'),
/*path: './public',*/
publicPath: BaseName+'/',
filename: 'index.js'
},
devServer: {
host: 'localhost',
port: 3000,
contentBase: PATH.join(__dirname, '/public'),
inline: true,
historyApiFallback: true,
headers: { "Access-Control-Allow-Origin": "*" }
},
module: {
loaders: [
{
test: /(\.js|.jsx)$/,
loader: 'babel',
query: {
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"react-html-attrs",
"transform-decorators-legacy",
"transform-class-properties"
]
}
}
]
},
plugins: [
new WEBPACK.DefinePlugin({
BASENAME: JSON.stringify(BaseName)
})
]
}
What could this error be?. It is all OK, right? How could I solve this? Thank you.
EDIT: I am getting next error too: DevTools failed to parse SourceMap: http://MYSERVER.com/upct/src/css/bootstrap.css.map
Please add NODE_ENV = 'production' environmental variable to your Webpack build in order to disable debug information and warnings, most of the property type checks and other developer-friendly tools. It will make the app faster but harder to debug. Use this only when deploying to the production.
In your case, in the plugins section just add:
new WEBPACK.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
Please see documentation about optimizing the production build with React, especially Webpack section.
As for the error with the source maps, it seems that the link is broken and returns 404 Not Found error so Chrome can't fetch the original source code mapping for Bootstrap's CSS. That's not a big issue as you probably won't be looking at it's source but that might be a signal that your Webpack build doesn't deploy source maps when building the app. Please add devtool: 'source-map' to your config file in order to produce source maps which will improve the debugging experience on production by translating bundled code to original source files.
UglifyJs will minimize the code size by renaming variables, function names and by other optimization tricks. You can add it to your plugins section of the config file the same way:
new WEBPACK.optimize.UglifyJsPlugin({
compress: {
// suppresses warnings, usually from module minification
warnings: false,
},
}),
There are many possible optimizations, for more information please see this optimization guide.
I am working on a React application and uses Webpack to create bundle.js file. Even though my application is very simple bundle.js file size is around 11MB.
When I analyze the bundle file with https://webpack.github.io/analyse/, more than 1000 packages are included in the bundle.js. Some of those packages are defined in devDependencies section of the package.json file.
Therefore I am looking for answers to following questions.
Is there a way to reduce file size of the webpack compilation?
Does webpack include devDependencies modules in final bundle.js?
change devtool: 'cheap-module-eval-source-map' to devtool: 'cheap-source-map' in webpack config. beacause webpack -p doesnot accept cheap-module-eval-source-map
I have webpack 6.0.1. In addition to usual webpack.config.js settings I can suggest the following optimization model (webpack.config.js production mode). For more info see the optimization, mode configuration and comments related to plugins at the bottom:
//webpack.config.js
module.exports = {
...
devtool: 'cheap-module-source-map',
...
plugins : [
...
new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.HashedModuleIdsPlugin({
hashFunction: 'sha256',
hashDigest: 'hex',
hashDigestLength: 4
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
],
...
optimization: {
namedModules: false,
namedChunks: false,
nodeEnv: 'production',
flagIncludedChunks: true,
occurrenceOrder: true,
sideEffects: true,
usedExports: true,
concatenateModules: true,
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
},
minSize: 30000,
maxAsyncRequests: 5,
maxAsyncRequests: 3,
},
noEmitOnErrors: true,
minimize: true,
minimizer: [
// we specify a custom UglifyJsPlugin here to get source maps in production
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
],
removeAvailableModules: true,
removeEmptyChunks: true,
mergeDuplicateChunks: true,
},
...
}
Comments:
webpack.optimize.ModuleConcatenationPlugin() - concatenate the scope
of all your modules into one closure and allow for your code to have
a faster execution time in the browser
webpack.HashedModuleIdsPlugin() - cause hashes to be based on the
relative path of the module, generating a four character string as
the module id
webpack.optimize.OccurrenceOrderPlugin() - vary the
distribution of the ids to get the smallest id length for often used
ids
webpack.NoEmitOnErrorsPlugin() - skip the emitting phase
whenever there are errors while compiling. This ensures that no
assets are emitted that include errors