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?
