React: How to import a node module that creates a React element?

Question

I have 2 repos:

my main web app
my shared component library, being imported as a node module through package.json

Both of them use React. In my main web app, I'm just importing the component files of my shared component library directly like so:

Switch.js (in my shared component library)

import React from 'react';
import { Switch } from 'antd';
import styled from 'styled-components';
import { CloseOutlined, CheckOutlined } from '@ant-design/icons';

const StyledSwitch = styled(Switch).attrs({
  checkedChildren: <CheckOutlined />,
  unCheckedChildren: <CloseOutlined />
})``;

export default StyledSwitch;

My main web app:

import Switch from 'my-shared-component-lib/components/Switch';

However, I'm getting this error:

../my-shared-component-lib/components/Switch.js
SyntaxError: /Users/edmundmai/Documents/src/my-shared-component-lib/components/Switch.js: Unexpected token (9:19)

   7 | 
   8 | const StyledSwitch = styled(Switch).attrs({
>  9 |   checkedChildren: <CheckOutlined />,
     |                    ^
  10 |   unCheckedChildren: <CloseOutlined />
  11 | })`
  12 |   &.ant-switch {

Is there something I have to install so that my imports will work?

Bronson · Accepted Answer · 2020-06-10 22:13:35Z

1

I don't think you can use a React component as an object value in this manner:

{
  checkedChildren: <CheckOutlined />,
  unCheckedChildren: <CloseOutlined />
}

The < is not valid syntax for the start of an object value (hence the "Unexpected token" error).

What you may want to try instead is to use a Prop Factory offered by styled-components instead, e.g.:

const StyledSwitch = styled(props => <Switch
  checkedChildren={<CheckOutlined />}
  unCheckedChildren={<CloseOutlined />}
  {...props}
/>)``;

I haven't used the styled-components library, but I think it should work based on what I see in this code sandbox (which I derived from this official example from Ant Design's Switch documentation).

Here's a comment from the styled-components GitHub issues that might also be worth looking at.

edited Jun 10, 2020 at 22:13

answered Jun 10, 2020 at 22:11

Bronson

1161 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bigpotato Over a year ago

I just tried the syntax you suggested but it still didn't work. Same error. Thanks for the effort though

Bronson Over a year ago

That's odd. There shouldn't be anything invalid about the syntax that would result in the same "Unexpected token" error if {<CheckOutlined />} and {<CloseOutlined />} are wrapped in curly braces on both sides.

Collectives™ on Stack Overflow

React: How to import a node module that creates a React element?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related