react-sizeme | Make your React Components aware of their width and height | Frontend Utils library

So I am trying to loop through some components so that I can keep track of the component height in order to decide to put a page break. I have an array of components that I am trying to map but I am getting the infamous map is not a function. Here is my code.

I have a React.js project based on React-Boilerplate 3.7.0 and I'm using its own webpack configurations files, that is to say webpack.base.babel.js, webpack.dev.babel.js and webpack.prod.babel.js. I've been looking for a solution in the web for a while and I was unable to find a way to solve this. In https://gitter.im/webpack/webpack there is a banner saying:

For questions please post on Stack Overflow and use the 'webpack' tag

So here I'm, once again. Webpack compiles the project with no errors and no warnings in development (if I run npm start), but if I run npm run build or npm run-script build it tells me:

I've created a React component which takes any component and renders it as a Pop-up. A parent component receives the component to be rendered (popped up). The rendered component is here the child component which using react-sizeme to get its size and pass back to parent component. The parent component must take the dimensions of child component, so adjusts' its height and width. This is the code:

I am writing jest unit tests for a React Stateless Functional Component (SFC) that is inside a Higher Order Component (HOC). How do I use TestUtils to find a specific class in the SFC?

Specifically, my SFC/HOC looks like:

I'm kind of desperate here.

I'm working on a React application and use webpack to compile my bundle.js. The problem is when i try to compile it for "production" i end up with a really nasty error :

"Minified React error #105; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=105&args[]=HardwareKeyboardArrowDown for the full message or use the non-minified dev environment for full errors and additional helpful warnings."

Followed by a bunch of "Uncaught TypeError: Cannot read property '__reactInternalInstance$qw6tjofxg1o' of null"

When i set my node.env to developement ('NODE_ENV': JSON.stringify('developement') ), it's working fine.

The link in the error says : "A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object" but i don't have any problem in dev mode, so i don't think its coming from my code and i can't find where i should look to solve this problem since dev mode doesn't tell anything more to me...

Here are my webpack config & package.json :

I'm struggling to pose this question in a concise manner. I am having some major performance issues with my app. I have installed the Perf add-on tools for react and can see where the issue is, however I am unsure of the best way to fix it.

I think it will probably have something to do with ReSelect... but need some guidance on where to begin.

I have a component that renders a number of other components. This uses size-me (to calculate the size of the browsing window), and react-grid-layout (to layout each component and permit their positioning to be changed). This is resource intensive, so I can't have this happening unnecessarily.

The user can click on a button to open a modal window (to add or edit the components that are being rendered in the grid).

The issue: When the modal window opens, the underlying component re-renders, causing size-me and react-grid-layout to re-render, which thus causes the modal to "jerkingly" open!

This is the entire state tree:

This is the only part of the state that changes when I open the modal:

The size-me and react-grid-layout stuff is rendering state from the formEngine.form part of the state tree, yet it is being re-rendered when state updates are made to the formEngine.addComponent part of the tree

Here are the performance logs:

As you can see, there are some wasted renders happening AND this will only grow incrementally based on the number of nested layout components the user decides to add to the form...

So to try and prevent this question from becoming too convoluted, let me ask first:

1. How do I prevent the underlying page from re-rendering when I open the modal?
2. Why are components that are watching formEngine.form triggered to re-render when fromEngine.addComponent gets modified?

Thank you.

EDIT 1:

I'm not sure if this is relevant, but to answer the comment, I added this code. The AddFormComponent is the Modal that jerks open.

Form.js: