Module parse failed: Unexpected token (13:39) You may need an appropriate loader to handle this file type,
linonetwo opened this issue · comments
lin onetwo commented
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?