Skip to content
This repository has been archived by the owner on Aug 19, 2022. It is now read-only.

"please wrap your application in the StyleRoot component" when using MediaQuery #911

Closed
hhimanshu opened this issue Jul 19, 2017 · 8 comments
Closed

"please wrap your application in the StyleRoot component" when using MediaQuery #911

hhimanshu opened this issue Jul 19, 2017 · 8 comments

Comments

@hhimanshu
Copy link

hhimanshu commented Jul 19, 2017 •
edited
Loading

Hello, this is how my component looks like

import React from "react";
import Radium from "radium";
import StyleRoot from "radium";

var styles = {

    base: {
        background: 'blue',
        border: 0,
        borderRadius: 4,
        color: 'white',
        padding: '1.5em',
        width: '15%',

        '@media (min-width: 320px)': {
            width: '100%'
        },

        ':hover': {
            backgroundColor: 'red'
        },

        ':focus': {
            backgroundColor: 'green'
        },

        ':active': {
            backgroundColor: 'yellow'
        },
    },

    block: {
        display: 'block',

        ':hover': {
            boxShadow: '0 3px 0 rgba(0,0,0,0.2)'
        }
    },
};

class LoginPage extends React.Component {
    render() {
        return (
            <StyleRoot>
                <button style={[
                    styles.base,
                    this.props.block && styles.block
                ]}>
                    {this.props.children}
                </button>
            </StyleRoot>
        );
    }
}

// https://github.com/FormidableLabs/radium/issues/816
// https://github.com/storybooks/storybook/issues/455
export default Radium(LoginPage);

I looked at another issue #574 and seems like I am doing what is recommended.

My package.json entry looks like

"radium": "^0.19.1",

I even tried with the following import

import {StyleRoot} from "radium";

But the error remained same. The entire stacktrace looks like


ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
getClosestInstanceFromNode @ ReactDOMComponentTree.js:113
findParent @ ReactEventListener.js:38
handleTopLevelImpl @ ReactEventListener.js:67
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$l955y3wpg6n' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)

Please help me understand what have I missed in following the steps? Thanks
@hhimanshu
Copy link
Author

Any help on this?

@HsuTing
Copy link

HsuTing commented Jul 21, 2017

Use

import Radium, {StyleRoot} from "radium";

@ghost
Copy link

ghost commented Jul 26, 2017

Looks like you're not importimg properly StyleRoot component.

@alexlande
Copy link
Contributor

Thanks again @HsuTing! Yep, StyleRoot is a named export, so it has to be imported differently. What you're effectively doing in the code you pasted is importing Radium twice but giving it a different name the second time. Some more details on ES6 imports here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Description

@maitraiya
Copy link

its not working @alexlande

@maitraiya
Copy link

hey @hhimanshu did you get the solution for it???

@NZY1337
Copy link

NZY1337 commented Mar 1, 2020

https://igoreskin.github.io/inline_styling_with_radium_and_styleroot_in_react

@VishalC672
Copy link

VishalC672 commented Apr 23, 2020 •
edited
Loading

It's working if you use StyleRoot in index.js file.
Wrap the App component with StyleRoot in ReactDOM.render

But I'm not sure if this is the right approach for this problem.

import { StyleRoot } from 'radium'; ReactDOM.render(<StyleRoot><App /></StyleRoot>, document.getElementById('root')); registerServiceWorker();

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@alexlande @hhimanshu @HsuTing @NZY1337 @maitraiya @VishalC672