Module parse failed: Unexpected token (13:39) You may need an appropriate loader to handle this file type,

[linonetwo]

I have mdx:

# Adder Tree

---

## Example

import AdderTree from './src/AdderTree.jsx';

<AdderTree size={8} />

---

## The End

and

// src/AdderTree.jsx
import React from 'react';
import styled from 'styled-components';
import { range } from 'lodash';

import Adder from './Adder.jsx';

const AdderTreeContainer = styled.div`
  display: flex;
  flex-direction: column;
`;

export default function AdderTree(props) {
  return range(props.size).map((id) => <Adder id={id} />);
}

and

// src/Adder.jsx
import React from 'react';
import styled from 'styled-components';

const AdderContainer = styled.div`
  border: 2px solid #66ccff;
`;

export default function Adder(props) {
  return <AdderContainer>{props.id}</AdderContainer>;
}

The error is:

✖ ｢wdm｣: 
ERROR in ./src/AdderTree.jsx 13:39
Module parse failed: Unexpected token (13:39)
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
| 
| export default function AdderTree(props) {
>   return range(props.size).map((id) => <Adder id={id} />);
| }
| 
 @ ./index.mdx 14:17-47
 @ ./node_modules/mdx-deck/dist/entry.js
 @ multi ./node_modules/mdx-deck/dist/entry.js ./node_modules/mdx-deck/lib/overlay.js

What's the possible cause？