Ionic React - Styled components Unexpected token

@kolbis wrote:

I am using a third-party library that uses styled components
when trying to run ionic build I am getting: “Module parse failed: Unexpected token”
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

the line that breaks the build is const Box = props => <StyledBox {…props} />;
inside this file Box.jsx
import React from ‘react’;

import styled from ‘styled-components’;

import PropTypes from ‘prop-types’;

import { match } from ‘…/…/…/helpers/styledIs’;

// CONSTS

export const DIRECTION_OPTIONS = [‘row’, ‘rowReverse’, ‘column’, ‘columnsReverse’];

export const DEFAULT_DIRECTION = ‘row’;

export const WRAP_OPTIONS = [‘nowrap’, ‘wrap’, ‘wrapReverse’];

export const DEFAULT_WRAP = ‘nowrap’;

export const ALIGN_ITEMS_OPTIONS = [‘stretch’, ‘center’, ‘start’, ‘end’, ‘baseline’];

export const DEFAULT_ALIGN_ITEMS = ‘stretch’;

export const ALIGN_CONTENT_OPTIONS = [

‘stretch’,

‘center’,

‘start’,

‘end’,

‘spaceBetween’,

‘spaceAround’,

‘spaceEvenly’,

];

export const DEFAULT_ALIGN_CONTENT = ‘stretch’;

export const JUSTIFY_CONTENT_OPTIONS = [

‘center’,

‘start’,

‘end’,

‘spaceBetween’,

‘spaceAround’,

‘spaceEvenly’,

];

export const DEFAULT_JUSTIFY_CONTENT = ‘start’;

const StyledBox = styled.div`

width: ${props => props.width};

height: ${props => props.height};

display: flex;

flex-direction: row;

flex-wrap: nowrap;

justify-content: flex-start;

align-content: stretch;

/********************************* display *********************************/

/***************** http://cssreference.io/property/display *****************/

${match(‘inline’, true)`

display: inline-flex;

`};

/******************************** direction ********************************/

/************** http://cssreference.io/property/flex-direction **************/

${match(‘direction’, ‘row’)`

flex-direction: row; /* default */

`};

${match(‘direction’, ‘rowReverse’)`

flex-direction: row-reverse;

`};

${match(‘direction’, ‘column’)`

flex-direction: column;

`};

${match(‘direction’, ‘columnReverse’)`

flex-direction: column-reverse;

`};

/*********************************** wrap ***********************************/

/**************** http://cssreference.io/property/flex-wrap ****************/

${match(‘wrap’, ‘nowrap’)`

flex-wrap: nowrap; /* default */

`};

${match(‘wrap’, ‘wrap’)`

flex-wrap: wrap;

`};

${match(‘wrap’, ‘wrapReverse’)`

flex-wrap: wrap-reverse;

`};

/***************************** justify-content *****************************/

/************* http://cssreference.io/property/justify-content *************/

${match(‘justifyContent’, ‘start’)`

justify-content: flex-start; /* default */

`};

${match(‘justifyContent’, ‘end’)`

justify-content: flex-end;

`};

${match(‘justifyContent’, ‘center’)`

justify-content: center;

`};

${match(‘justifyContent’, ‘spaceBetween’)`

justify-content: space-between;

`};

${match(‘justifyContent’, ‘spaceAround’)`

justify-content: space-around;

`};

${match(‘justifyContent’, ‘spaceEvenly’)`

justify-content: space-evenly;

`};

/****************************** align-content ******************************/

/************** http://cssreference.io/property/align-content **************/

${match(‘alignContent’, ‘start’)`

align-content: flex-start;

`};

${match(‘alignContent’, ‘end’)`

align-content: flex-end;

`};

${match(‘alignContent’, ‘center’)`

align-content: center;

`};

${match(‘alignContent’, ‘spaceBetween’)`

align-content: space-between;

`};

${match(‘alignContent’, ‘spaceAround’)`

align-content: space-around;

`};

${match(‘alignContent’, ‘spaceEvenly’)`

align-content: space-evenly;

`};

${match(‘alignContent’, ‘stretch’)`

align-content: stretch; /* default */

`};

/******************************* align-items *******************************/

/*************** http://cssreference.io/property/align-items ***************/

${match(‘alignItems’, ‘start’)`

align-items: flex-start;

`};

${match(‘alignItems’, ‘end’)`

align-items: flex-end;

`};

${match(‘alignItems’, ‘center’)`

align-items: center;

`};

${match(‘alignItems’, ‘baseline’)`

align-items: baseline;

`};

${match(‘alignItems’, ‘stretch’)`

align-items: stretch;

`};

`;

const Box = props => <StyledBox {…props} />;

Box.defaultProps = {

inline: false,

direction: DEFAULT_DIRECTION,

wrap: DEFAULT_WRAP,

alignItems: DEFAULT_ALIGN_ITEMS,

alignContent: DEFAULT_ALIGN_CONTENT,

justifyContent: DEFAULT_JUSTIFY_CONTENT,

width: ‘auto’,

height: ‘auto’,

};

Box.propTypes = {

/** Sets display to inline-flex.

• If true, element will not end with a line break.

*/

inline: PropTypes.bool,

/** Establishes the main-axis direction flow of the box. */

direction: PropTypes.oneOf(DIRECTION_OPTIONS),

/** Set how box item will be wrapped. */

wrap: PropTypes.oneOf(WRAP_OPTIONS),

/** This defines the default behavior for how flex items are laid out

• along the cross axis on the current line.

*/

alignItems: PropTypes.oneOf(ALIGN_ITEMS_OPTIONS),

/** This aligns a flex container’s lines within when there is extra space in the cross-axis */

alignContent: PropTypes.oneOf(ALIGN_CONTENT_OPTIONS),

/** This aligns a flex container’s lines within when there is extra space in the main-axis */

justifyContent: PropTypes.oneOf(JUSTIFY_CONTENT_OPTIONS),

/** The width of the box */

width: PropTypes.string,

/** The height of the box */

height: PropTypes.string,

};

export default Box;

Any idea how can i solve it?

Posts: 1

Participants: 1

Read full topic