Invariant Violation

[emlama]

Hi there, I seem to be getting an invariant violation and can't get my head around what the problem is. I am using webpack and React Router if that helps.

This is the error:

invariant.js:39 Uncaught Error: 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 (details: https://fb.me/react-refs-must-have-owner).

Here's how my file is setup:

import React from 'react';
import Playground from 'component-playground';

import Button from './Button';
import DebugInfo from "./debug-info";
var contextExample = require('raw!./context.example');

var ComponentRoute = React.createClass({
    render() {
        return (
            <div>
                <Playground
                  context={{environment: "staging"}}
                  codeText={contextExample}
                  scope={{React: React, DebugInfo: DebugInfo}}/>
            </div>
        );
    }
});

export default ComponentRoute;

[kenwheeler]

Is your example code using a ref?

[stereobooster]

getting the same with emotion website

git clone https://github.com/stereobooster/emotion
cd emotion
yarn install
yarn start:site
open http://localhost:3000

https://github.com/stereobooster/emotion is equal with https://github.com/emotion-js/emotion at the moment of writing.

invariant.js:42 Uncaught Error: 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 (details: https://fb.me/react-refs-must-have-owner).
    at invariant (invariant.js:42)
    at Object.addComponentAsRefTo (ReactOwner.js:66)
    at attachRef (ReactRef.js:21)
    at Object.ReactRef.attachRefs (ReactRef.js:40)
    at ReactCompositeComponentWrapper.attachRefs (ReactReconciler.js:21)
    at CallbackQueue.notifyAll (CallbackQueue.js:74)
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js:78)
    at ReactReconcileTransaction.closeAll (Transaction.js:207)
    at ReactReconcileTransaction.perform (Transaction.js:154)
    at batchedMountComponentIntoNode (ReactMount.js:124)
    
react-dom.development.js:9747 The above error occurred in the <Editor> component:
    in Editor (created by ReactPlayground)
    in div
    in Styled(div) (created by ReactPlayground)
    in ReactPlayground (created by App)
    in div (created by App)
    in div
    in Styled(div) (created by App)
    in ThemeProvider (created by App)
    in App

Source code is here. As you can see it doesn't use ref.

There is ref in another component:

<div ref="mount" className="preview-display" />

I tried to remove it and the problem still exists.