Error while using exported component

[jackHedaya]

Hi!

I'm working on writing a library material-ui-credit-card but am having trouble during compilation:

../dist/index.modern.js 48:49
Module parse failed: Unexpected token (48:49)
File was processed with these loaders:
 * ../node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     ...otherProps
|   } = props;
>   const creditCardType = optionalCreditCardType ?? ((_getCreditCardType = getCreditCardType(value)) === null || _getCreditCardType === void 0 ? void 0 : _getCreditCardType[0]);
|   const CardIcon = TYPE_TO_ICON[creditCardType === null || creditCardType === void 0 ? void 0 : creditCardType.type] ?? ReactComponent;
|   return React.createElement(TextField, Object.assign({

My project uses svg images like so, not sure if it might be messing with anything:

import { ReactComponent as AMEX_ICON } from 'payment-icons/min/flat/amex.svg'

[darrenklein]

Not sure if this'll help you, but I believe I struck a similar issue a while back trying to work with .svg files in my application. Note the line You may need an additional loader to handle the result of these loaders..

In my case, I was able to resolve this by including the url-loader in my webpack configuration - note the last rule,

	"module": {
		"rules": [
			{
				"test": /\.scss$/,
				"use": ExtractTextPlugin.extract({
					"fallback": "style-loader",
					"use": ["css-loader", "sass-loader"]
				})
			},
			{
				"test": /\.css$/,
				"use": ExtractTextPlugin.extract({
					"fallback": "style-loader",
					"use": ["css-loader?modules&importLoaders=1&localIdentName=[local]"]
				})
			},
			{
				"test": /\.(gif|ttf|eot|svg|woff2?)$/,
				"use": "url-loader?name=[name].[ext]",
			}
		]
	}

https://webpack.js.org/loaders/url-loader/