search

gcanti / tcomb-form

Forms library for react
https://gcanti.github.io/tcomb-form
MIT License
1.16k stars 136 forks source link

Webpack module concatenation (scope hoisting) causes problems #423

Closed volkanunsal closed 5 years ago

volkanunsal commented 5 years ago

Version

Tell us which versions you are using:

Expected behaviour

Tell us what should happen

I'm trying to prepare tcomb-form for React 16.7 by getting rid of componentWillReceiveProps. While working on that project, I discovered that Webpack 4's scope hoisting feature causes some strange update behavior. When you update any input field, the entire fieldset (generated by Struct component) gets updated, which causes input fields to lose their focus.

The only way I can get around it is by disabling concatenation or disabling ES6 modules, i.e. pregenerating tcomb-form code.

Steps to reproduce

  1. Install Webpack 4
  2. Use production mode in Webpack config (or just set config.optimization.concatenateModules = true, and make sure to add the plugin new webpack.optimize.ModuleConcatenationPlugin();)
  3. Update a text input field
volkanunsal commented 5 years ago

Experimenting with this issue further, I'm finding that 'source-map' devtool may be the actual reason for the strange behavior. 

config.mode = 'production'
config = Object.assign({}, config, {
  devtool: 'source-map',
});

And also this must be true: NODE_ENV=production

volkanunsal commented 5 years ago

Looks like this is a webpack issue.