Boards contain components and HTML elements that have specific permutations of props, states, and styles for more specific use cases. To use a board with components in the Add Elements panel, the board that the component's code is based on needs to meet certain requirements. If a board with component shows up in the Add Elements panel as invalid, it may be invalid for one of these reasons:

You can find out the reason why the board with components is invalid by hovering over it in the Add Elements panel.

Non-production code often shows its face during development, testing, and in experiments, and often contains imports from testing libraries, conditional code just for tests and debugging, and so on. For components to be valid in the Add Elements panel, you'll have to remove all non-production code from the relevant board so that Codux can insert production-ready code into the target instead.

The No Returned JSX error appears when the component doesn't have a JSX (JavaScript XML) element to return (needed for HTML and TypeScript to play nice together). Without a JSX element, Codux has nothing to insert into the target component.

Check that the relevant board is returning a JSX element.

This error originates from the presence of more than one, or no return operations in the source code of the component. When there's more than one return, Codux won't know which to insert when copying the snippet into the target.

To fix this, check the relevant board code for extra returns, leaving just one.