Semantic-ui-react: Modals with `dimmer: false` throw an exception in 0.78.3

[beaugunderson]

Steps

• Add modal with these props:

  dimmer: false

Expected Result

No exception will be thrown when the modal is shown.

Actual Result

An exception is thrown, likely due to the changes made in #2407 (the exception happens after upgrading to 0.78.3):

Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('function wrapper() {
    var length = arguments.length,
        args = Array(length),
        index = length;

    while (index--) {
      args[index] = arguments[index];
    }
    if (isCurried) {
      var placeholder = getHolder(wrapper),
          holdersCount = countHolders(args, placeholder);
    }
    if (partials) {
      args = composeArgs(args, partials, holders, isCurried);
    }
    if (partialsRight) {
      args = composeArgsRight(args, partialsRight, holdersRight, isCurried);
    }
    length -= holdersCount;
    if (isCurried && length < arity) {
      var newHolders = replaceHolders(args, placeholder);
      return createRecurry(
        func, bitmask, createHybrid, wrapper.placeholder, thisArg,
        args, newHolders, argPos, ary, arity - length
      );
    }
    var thisBinding = isBind ? thisArg : this,
        fn = isBindKey ? thisBinding[func] : func;

    length = args.length;
    if (argPos) {
      args = reorder(args, argPos);
    } else if (isFlip && length > 1) {
      args.reverse();
    }
    if (isAry && ary < length) {
      args.length = ary;
    }
    if (this && this !== root && this instanceof wrapper) {
      fn = Ctor || createCtor(fn);
    }
    return fn.apply(thisBinding, args);
  }') contains HTML space characters, which are not valid in tokens.
    at eval (webpack-internal:///../../node_modules/semantic-ui-react/dist/es/addons/MountNode/lib/handleClassNamesChange.js:26:27)
    at arrayEach (webpack-internal:///1165:15:9)
    at forEach (webpack-internal:///418:38:10)
    at handleClassNamesChange (webpack-internal:///../../node_modules/semantic-ui-react/dist/es/addons/MountNode/lib/handleClassNamesChange.js:25:56)
    at NodeRegistry.emit (webpack-internal:///../../node_modules/semantic-ui-react/dist/es/addons/MountNode/lib/NodeRegistry.js:36:5)
    at MountNode.componentWillMount (webpack-internal:///../../node_modules/semantic-ui-react/dist/es/addons/MountNode/MountNode.js:61:22)
    at callComponentWillMount (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:6370:14)
    at mountClassInstance (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:6435:7)
    at updateClassComponent (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:7840:9)
    at beginWork (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:8225:16)

Version

0.78.3

Testcase

(will add a pen later today when I get time)

(cc @mbestwick)

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

Unable to reproduce, see codesandbox.

Please add a repro case and I'll reopen issue.

[beaugunderson]

@layershifter apologies, i just tried creating a repro in the sandbox using the exact <Modal> invocation we're using but was unable to reproduce the issue; adding dimmer={false} back to our app brings back the exception though... i guess this means it's a more complex interaction than i thought; possibly due to a containing element or some other library :(

[bytasv]

Hey I've bumped into the same issue and I've managed to track down the issue to following:

handleClassNamesChange calls computerClassNames which in turn executes this code:

import _ from 'lodash/fp'

const computeClassNames = _.flow(
  _.toArray,
  _.map('props.className'),
  _.flatMap(_.split(/\s+/)),
  _.filter(_.identity),
  _.uniq,
)

export default computeClassNames

I found that it breaks on _.split because for some reason call returns curried function rather than an actual result, therefore in the end, handleClassNamesChange tries to add a class name to the classList which is a function.

Trying to dig deeper and understand why split breaks in different projects.

So far I've checked that both projects uses the same lodash version

[bytasv]

I've found the issue on my side - @beaugunderson I would advice to check if you used LodashModuleReplacementPlugin. In my case this was plugin that broke something for split import of lodash/fp

[beaugunderson]

@bytasv ah, thank you! we do use LodashModuleReplacementPlugin and have encountered issues like this from time to time, usually fixed by enabling whichever flag in LodashModuleReplacementPlugin fixes it... but since this is the third or fourth time this plugin has broken something maybe it's time for us to get rid of it :)