New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mobx-react make react-css-module doens't work #228

Closed
100cm opened this Issue Mar 29, 2017 · 11 comments

Comments

Projects
None yet
5 participants
@100cm

100cm commented Mar 29, 2017

Warning: Unknown prop styleName on <div> tag. Remove this prop from the element. For details, see

and my code :
@Inject('global')
@Observer
class InvoiceManage extends React.Component {
}

export default CSSModules(InvoiceManage, styles)

@mweststrate

This comment has been minimized.

Member

mweststrate commented Mar 30, 2017

Probably CSS modules needs to be inbetween inject and observer (that is actually one of the reasons they are seperate), so probably you need something like:

class InvoiceManage extends React.Component {
}

export default inject('global')(CSSModules(observer(InvoiceManage), styles))
@100cm

This comment has been minimized.

100cm commented Apr 6, 2017

@mweststrate , this won't work,its will occur Endless Loop of rerender.

@diondirza

This comment has been minimized.

diondirza commented Apr 13, 2017

@icepoint0 I think you have put it in wrong order, try this

@inject('global')
@observer
@CSSModules(styles)
class InvoiceManage extends React.Component {
}

export default InvoiceManager;

or

export default inject('global')(observer(CSSModules(InvoiceManager, styles));

@mweststrate

This comment has been minimized.

Member

mweststrate commented Apr 19, 2017

@icepoint0 did the above address the issue?

Otherwise you can always consider to split the component into two; one observer component that just picks of the data you need, and pass it as non-observables to a helper component that does the actual rendering and is wrapped with the CSSModules decorator?

@mweststrate

This comment has been minimized.

Member

mweststrate commented May 25, 2017

Closing for inactivity

@TheBoroer

This comment has been minimized.

TheBoroer commented Jul 27, 2017

Sorry to resurrect this issue but I did what @diondirza mentioned with putting the decorators in the inject, observe, cssmodules order but I still get endless looping with the following error in the console:

Warning: forceUpdate(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

I'll play around with it a bit more but I was wondering if anyone found a fix for the issue. I have a blank project setup with just an App and a Example container and 1 commonStore to reproduce the issue. If anyone needs it, let me know and I'll put it up into a public repo.

Splitting the component into 2 is a bit of extra work since the project i'm trying to integrate MobX into is already using CSS modules and i'd have to split many many components to make it work that way :(

@TheBoroer

This comment has been minimized.

TheBoroer commented Jul 28, 2017

For anyone stumbling across this in the future.... I found the issue!

It's an issue with the react-css-modules package and the way it was designed to work. CSSModules wraps your component in a High-Order Component (HOC) which means MobX then wraps around that and re-renders it any time there's a change in your store that's observed. You can see it conflicting with another package and a better explanation here: jayphelps/core-decorators#80

The only (and easiest) solution is to switch to babel-plugin-react-css-modules and it all works fine now since that's a babel plugin, you don't need to have the @CSSModules decorator or wrap the export at all!
I still have to iron out some issues with it compiling my SASS/SCSS but I'll figure that out in time too.

Have a great day!

@jjinux

This comment has been minimized.

jjinux commented Mar 26, 2018

Ugh, this one is biting me hard. I'm worried about trying to migrate to babel-plugin-react-css-modules since we're still using Less. I wonder if it's possible to try to take the source code for @Observer and @cssModules and try to combine them into one decorator.

I wonder why it doesn't bite more people. Does it suggest that the intersection of projects who use Mobx and react-css-modules and who've updated is quite small?

@TheBoroer

This comment has been minimized.

TheBoroer commented Mar 26, 2018

@jjinux I had no problems moving to babel-plugin-react-css-modules (for css and scss). Less should work easily too! Give it a try on your project!

A 2-in-1 decorator would be cool too though!

@jjinux

This comment has been minimized.

jjinux commented Mar 26, 2018

On https://github.com/gajus/react-css-modules/issues/200, it says, "This project is no longer actively maintained. I suggest inspecting https://github.com/gajus/babel-plugin-react-css-modules."

Let's hope it goes smoothly ;)

@jjinux

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment