addComponentAsRefTo Fehler nur beim dynamischen Anzeigen eines Popup

Question

Ich benutze die UI-Grommet-Bibliothek auf der Serverseite. Ich möchte ein Popup (Document) anzeigen, wenn Benutzer auf das Bild klicken und eine Aktion an den Refux Reducer senden. Es gelingt, das Pop-up zu zeigen, aber ich bekomme diese Client-Seite Fehler

invariant.js:38 Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded 

erst nachdem das Popup angezeigt wird. Weiß jemand, was falsch ist mit der Art, wie ich das Popup ein- oder ausgeblendet habe?

class ItemImage extends React.Component { 

    render(){ 
     return <div onClick={this.onClickPopUp.bind(this)}> 
      { 
       this.props.dialog? 
       <Layer onClose={this._onClose} closer={true} flush={true}> 
        <div>Hello!!!!</div> 
       </Layer>:"" 
      } 
      <Image full="vertical" src={buildImageUrl(this.props)} size="small"/> 
      </div> 
    } 
    onClickPopUp(){ 

     if(this.props.dialog){ 
      this.props.dispatch(hideDialogAction()); 
     }else{ 
      this.props.dispatch(showDialogAction()); 
     } 
    } 

    function showDialogAction(){ 
     return { 
     type:ActionType.dialog, 
     visible:true 
     } 
    } 

    function hideDialogAction(){ 
     return { 
      type:ActionType.dialog, 
      visible:false 
    } 
    } 
} 

Minderer:

export default function DialogReducer (state = false, action){ 
    switch(action.type) { 
     case ActionType.dialog: 
      return action.visible; 
     default: 
      return state; 
    } 
} 

Webpack config:

module.exports = { 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel', 
       include: APP_DIR, 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      }, 
      { 
       test: /\.css$/, 
       loader: "style-loader!css-loader" 
      }, 
      { 
       test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
       loader: 'url-loader?limit=100000' 
      }, 
      { 
       test: /\.(png|jpg)$/, 
       loader: 'file-loader' 
      } 
     ] 
    }, 
    resolve: { 
     alias: { 
      react: path.resolve('./node_modules/react'), 
     } 
    }, 
    entry: APP_DIR + '/Item.js', 
     devtool: 'source-map', 
     output: { 
      filename: 'Item.js', 
      libraryTarget: 'umd', 
      library: 'Item' 
     }, 
     externals: [{ 
      react: { 
       root: 'React', 
       commonjs2: 'react', 
       commonjs: 'react', 
       amd: 'react' 
      } 
     }] 
    } 
}; 

Stacktrace:

invariant @ invariant.js:38 
addComponentAsRefTo @ ReactOwner.js:69 
attachRef @ ReactRef.js:23 
ReactRef.attachRefs @ ReactRef.js:42 
attachRefs @ ReactReconciler.js:26 
notifyAll @ CallbackQueue.js:67 
close @ ReactReconcileTransaction.js:81 
closeAll @ Transaction.js:204 
perform @ Transaction.js:151 
batchedMountComponentIntoNode @ ReactMount.js:126 
perform @ Transaction.js:138 
batchedUpdates @ ReactDefaultBatchingStrategy.js:63 
batchedUpdates @ ReactUpdates.js:98 
_renderNewRootComponent @ ReactMount.js:285 
obj.(anonymous function) @ backend.js:8365 
_renderSubtreeIntoContainer @ ReactMount.js:371 
render @ ReactMount.js:392 
_renderLayer @ Layer.js:321 
componentDidMount @ Layer.js:235 
invokeComponentDidMountWithTimer @ ReactCompositeComponent.js?cd59:54 
notifyAll @ CallbackQueue.js?bea8:67 
close @ ReactReconcileTransaction.js?9178:81 
closeAll @ Transaction.js?6dff:204 
perform @ Transaction.js?6dff:151 
perform @ Transaction.js?6dff:138 
perform @ ReactUpdates.js?ce09:90 
flushBatchedUpdates @ ReactUpdates.js?ce09:173 
closeAll @ Transaction.js?6dff:204 
perform @ Transaction.js?6dff:151 
batchedUpdates @ ReactDefaultBatchingStrategy.js?ef70:63 
batchedUpdates @ ReactUpdates.js?ce09:98 
dispatchEvent @ ReactEventListener.js?2365:150 

Answer 1

ich dieses Problem gelöst, das in webpack.config durch Zugabe:

externals: [{ 
     react: { 
      root: 'React', 
      commonjs2: 'react', 
      commonjs: 'react', 
      amd: 'react', 

     }, 
     "react-dom": "ReactDOM" <<=== this one is needed 
    }] 

Aber ich würde jemandem helfen, der weiß, was hinter der Szene passiert, liefert eine Erklärung zu diesem Problem.