[neutrino-preset-react] Unable to set state

[rj254]

What version of Neutrino are you using?
5.4.0
Are you trying to use any presets? If so, which ones, and what versions?
neutrino-preset-react@5.4.0
Are you using the Yarn client or the npm client? What version?
yarn@0.21.3
What version of Node.js are you using?
v7.3.0
What operating system are you using?
macOS
What did you do?

Attempted to use the neutrino-preset-react preset and attempted to use react's setState

What did you expect to happen?

I expected setState to work.

What actually happened, contrary to your expectations?

setState does not work currently as we get an issue similar to facebook/react#8850 although without typescript.

I believe that the issue has to do with how neutrino-preset-web sets the configuration for babel-preset-env. Changing the configuration for babel-preset-env in a forked preset of neutrino-preset-web resulted in the issue being removed.

[eliperelman]

Can you share what changes you made so I may replicate?

[rj254]

Sure,

For now, I changed the preset-env to just include targets, just to see if this would fix the issue. It did, so I'm assuming the issue is with babel-preset-env

My babel-preset-env is as follows:

            [require.resolve('babel-preset-env'), {
                    "targets": {
                        "chrome": true,
                        "edge": true,
                        "firefox": true,
                        "safari": true,
                        "ios": true,
                        "android": true,
                    }
                }
            ],

I also added the stage-1 preset. I will try removing that and seeing if the issue comes back.

[rj254]

Additionally, the following works:

            [require.resolve('babel-preset-env'), {
                    "targets": {
                        browsers: [
                            'last 2 versions'
                        ]
                    },
                    modules: false,
                    useBuiltIns: true,
                    include: ['transform-regenerator'],
                }
            ],

It seems as though specifying all the last 2 <Browser> versions is causing something else to go wrong. From the browserslist docs, it seems as though they should do the same thing; however, the behavior is consistent.

[eliperelman]

Could you provide a reduced test case repository so I can replicate this? I'm having trouble replicating with the latest version.

[rj254]

neutrino-test-react-state.zip

[eliperelman]

This is a diff of the changes between using last 2 <browser> versions and last 2 versions:

diff --git a/env.a b/env.b
index b5b9c49..e8ddf31 100644
--- a/env.a
+++ b/env.b
@@ -3,6 +3,7 @@ Using targets:
   "chrome": 56,
   "edge": 14,
   "firefox": 51,
+  "ie": 10,
   "ios": 10,
   "safari": 10
 }
@@ -10,35 +11,114 @@ Using targets:
 Modules transform: false

 Using plugins:
-  transform-es2015-destructuring {"edge":14,"firefox":51}
-  transform-es2015-for-of {"edge":14,"firefox":51}
-  transform-es2015-function-name {"edge":14,"firefox":51}
-  transform-es2015-literals {"firefox":51}
-  transform-es2015-parameters {"firefox":51}
-  transform-regenerator {"firefox":51}
-  transform-exponentiation-operator {"firefox":51,"ios":10,"safari":10}
-  transform-async-to-generator {"edge":14,"firefox":51,"ios":10,"safari":10}
-  syntax-trailing-function-commas {"chrome":56,"firefox":51}
+  check-es2015-constants {"ie":10}
+  transform-es2015-arrow-functions {"ie":10}
+  transform-es2015-block-scoped-functions {"ie":10}
+  transform-es2015-block-scoping {"ie":10}
+  transform-es2015-classes {"ie":10}
+  transform-es2015-computed-properties {"ie":10}
+  transform-es2015-destructuring {"edge":14,"firefox":51,"ie":10}
+  transform-es2015-duplicate-keys {"ie":10}
+  transform-es2015-for-of {"edge":14,"firefox":51,"ie":10}
+  transform-es2015-function-name {"edge":14,"firefox":51,"ie":10}
+  transform-es2015-literals {"firefox":51,"ie":10}
+  transform-es2015-object-super {"ie":10}
+  transform-es2015-parameters {"firefox":51,"ie":10}
+  transform-es2015-shorthand-properties {"ie":10}
+  transform-es2015-spread {"ie":10}
+  transform-es2015-sticky-regex {"ie":10}
+  transform-es2015-template-literals {"ie":10}
+  transform-es2015-typeof-symbol {"ie":10}
+  transform-es2015-unicode-regex {"ie":10}
+  transform-regenerator {"firefox":51,"ie":10}
+  transform-exponentiation-operator {"firefox":51,"ie":10,"ios":10,"safari":10}
+  transform-async-to-generator {"edge":14,"firefox":51,"ie":10,"ios":10,"safari":10}
+  syntax-trailing-function-commas {"chrome":56,"firefox":51,"ie":10}

 Using polyfills:
-  es6.map {"edge":14,"firefox":51}
-  es6.set {"edge":14,"firefox":51}
-  es6.weak-map {"edge":14,"firefox":51}
-  es6.weak-set {"edge":14,"firefox":51}
-  es6.symbol {"edge":14}
-  es6.function.name {"edge":14,"firefox":51}
-  es6.regexp.flags {"edge":14}
-  es6.regexp.match {"edge":14}
-  es6.regexp.replace {"edge":14}
-  es6.regexp.split {"edge":14}
-  es6.regexp.search {"edge":14}
-  es6.array.from {"edge":14}
-  es7.object.values {"ios":10,"safari":10}
-  es7.object.entries {"ios":10,"safari":10}
-  es7.object.get-own-property-descriptors {"edge":14,"ios":10,"safari":10}
-  es7.string.pad-start {"chrome":56,"edge":14}
-  es7.string.pad-end {"chrome":56,"edge":14}
-  web.timers {"chrome":56,"edge":14,"firefox":51,"ios":10,"safari":10}
-  web.immediate {"chrome":56,"edge":14,"firefox":51,"ios":10,"safari":10}
-  web.dom.iterable {"chrome":56,"edge":14,"firefox":51,"ios":10,"safari":10}
+  es6.typed.array-buffer {"ie":10}
+  es6.typed.int8-array {"ie":10}
+  es6.typed.uint8-array {"ie":10}
+  es6.typed.uint8-clamped-array {"ie":10}
+  es6.typed.int16-array {"ie":10}
+  es6.typed.uint16-array {"ie":10}
+  es6.typed.int32-array {"ie":10}
+  es6.typed.uint32-array {"ie":10}
+  es6.typed.float32-array {"ie":10}
+  es6.typed.float64-array {"ie":10}
+  es6.map {"edge":14,"firefox":51,"ie":10}
+  es6.set {"edge":14,"firefox":51,"ie":10}
+  es6.weak-map {"edge":14,"firefox":51,"ie":10}
+  es6.weak-set {"edge":14,"firefox":51,"ie":10}
+  es6.reflect.apply {"ie":10}
+  es6.reflect.construct {"ie":10}
+  es6.reflect.define-property {"ie":10}
+  es6.reflect.delete-property {"ie":10}
+  es6.reflect.get {"ie":10}
+  es6.reflect.get-own-property-descriptor {"ie":10}
+  es6.reflect.get-prototype-of {"ie":10}
+  es6.reflect.has {"ie":10}
+  es6.reflect.is-extensible {"ie":10}
+  es6.reflect.own-keys {"ie":10}
+  es6.reflect.prevent-extensions {"ie":10}
+  es6.reflect.set {"ie":10}
+  es6.reflect.set-prototype-of {"ie":10}
+  es6.promise {"ie":10}
+  es6.symbol {"edge":14,"ie":10}
+  es6.object.assign {"ie":10}
+  es6.object.is {"ie":10}
+  es6.object.set-prototype-of {"ie":10}
+  es6.function.name {"edge":14,"firefox":51,"ie":10}
+  es6.string.raw {"ie":10}
+  es6.string.from-code-point {"ie":10}
+  es6.string.code-point-at {"ie":10}
+  es6.string.repeat {"ie":10}
+  es6.string.starts-with {"ie":10}
+  es6.string.ends-with {"ie":10}
+  es6.string.includes {"ie":10}
+  es6.regexp.flags {"edge":14,"ie":10}
+  es6.regexp.match {"edge":14,"ie":10}
+  es6.regexp.replace {"edge":14,"ie":10}
+  es6.regexp.split {"edge":14,"ie":10}
+  es6.regexp.search {"edge":14,"ie":10}
+  es6.array.from {"edge":14,"ie":10}
+  es6.array.of {"ie":10}
+  es6.array.copy-within {"ie":10}
+  es6.array.find {"ie":10}
+  es6.array.find-index {"ie":10}
+  es6.array.fill {"ie":10}
+  es6.array.iterator {"ie":10}
+  es6.number.is-finite {"ie":10}
+  es6.number.is-integer {"ie":10}
+  es6.number.is-safe-integer {"ie":10}
+  es6.number.is-nan {"ie":10}
+  es6.number.epsilon {"ie":10}
+  es6.number.min-safe-integer {"ie":10}
+  es6.number.max-safe-integer {"ie":10}
+  es6.math.acosh {"ie":10}
+  es6.math.asinh {"ie":10}
+  es6.math.atanh {"ie":10}
+  es6.math.cbrt {"ie":10}
+  es6.math.clz32 {"ie":10}
+  es6.math.cosh {"ie":10}
+  es6.math.expm1 {"ie":10}
+  es6.math.fround {"ie":10}
+  es6.math.hypot {"ie":10}
+  es6.math.imul {"ie":10}
+  es6.math.log1p {"ie":10}
+  es6.math.log10 {"ie":10}
+  es6.math.log2 {"ie":10}
+  es6.math.sign {"ie":10}
+  es6.math.sinh {"ie":10}
+  es6.math.tanh {"ie":10}
+  es6.math.trunc {"ie":10}
+  es7.array.includes {"ie":10}
+  es7.object.values {"ie":10,"ios":10,"safari":10}
+  es7.object.entries {"ie":10,"ios":10,"safari":10}
+  es7.object.get-own-property-descriptors {"edge":14,"ie":10,"ios":10,"safari":10}
+  es7.string.pad-start {"chrome":56,"edge":14,"ie":10}
+  es7.string.pad-end {"chrome":56,"edge":14,"ie":10}
+  web.timers {"chrome":56,"edge":14,"firefox":51,"ie":10,"ios":10,"safari":10}
+  web.immediate {"chrome":56,"edge":14,"firefox":51,"ie":10,"ios":10,"safari":10}
+  web.dom.iterable {"chrome":56,"edge":14,"firefox":51,"ie":10,"ios":10,"safari":10}

I then started to walk through and manually include each plugin until the issue went away. The problem was fixed once I included transform-es2015-classes. I'll do some more digging.

[eliperelman]

It appears that this is caused by gaearon/react-hot-loader#313. The issue went away when I either disabled react-hot-loader, or included transform-es2015-classes. As a workaround, you could add it to an override:

module.exports = neutrino => neutrino.config.module
  .rule('compile')
  .use('babel')
  .tap(options => {
    options.presets[0][1].include = [
      'transform-es2015-classes'
    ];
    return options;
  });

[constgen]

Are we going to include it by default?

[rj254]

I can add it to the stage-0 preset if you'd like; but I think this issue should probably be closed as it seems to be an issue with react-hot-loader and not with neutrino.

[constgen]

Not Neutrino but React preset

[eliperelman]

Thinking about this, I think we should implement the workaround in the React preset. Let's aim for v6.

[constgen]

Fixed in #213

[lielran]

@eliperelman Thanks for the workaround! works great. this is acctualy prevent from anyone on working with react and neutrino.
I hope that someone will review and merge @constgen fix soon.

[eliperelman]

Resolved in #213, and this will ship in Neutrino v6.