Skip to content
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

Upgrade to v2 causes rendering issue #13

Closed
kyleknighted opened this issue Nov 7, 2019 · 2 comments
Closed

Upgrade to v2 causes rendering issue #13

kyleknighted opened this issue Nov 7, 2019 · 2 comments

Comments

@kyleknighted
Copy link
Contributor

Describe the bug
Upgraded to v2 beta.0 and now it no longer renders and I get an error

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Expected behavior
According to #10 (comment) the API is remaining unchanged, but I guess something changed.

Additional context

import React from 'react';
import PropTypes from 'prop-types';
import { Box } from 'react-mops';
import styled from 'styled-components';

import 'react-mops/dist/esm/index.css';

const InvisibleMarker = styled.span`
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
`;

const Interactable = ({ children, size, ...props }) => {
  return (
    <Box size={size}
         marker={InvisibleMarker}
         fullHandles={false}
         hideGuides={() => true}
         drawBox={false}
         {...props}>
      {children}
    </Box>
  );
};

Interactable.propTypes = {
  children: PropTypes.node.isRequired,
  size: PropTypes.shape({
    height: PropTypes.number.isRequired,
    width: PropTypes.number.isRequired,
  }).isRequired,
};

export default Interactable;
@pixelass
Copy link
Owner

pixelass commented Nov 8, 2019

Here's a codesandbox: https://codesandbox.io/s/react-mops-issue-template-u2gnn

The export is now called GuidedBox (Box will be added later).
Also: rotation is mandatory.

I noticed an issue with the handles though (seems like the styles are not being applied correctly).

Sorry I'm very busy ATM so the next version might take a while. I'll see if I can at least fix the handles ASAP. (You could add them manually if this is urgent)

@kyleknighted
Copy link
Contributor Author

Got it rendering using this template - thank you. I can get styles implemented locally no problem!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants