How can i get import to work in javascript?

Question

i'm trying to add an accordion to my site using this tutorial: https://github.com/springload/react-accessible-accordion

I followed their instructions and installed the package. Then i put their code into a file called accordion.js which i put into my html using src.

Here is the code in accordion.js, however i get the error unexpected identifier for the import line. Any idea what is going wrong?

import React from 'react';
import ReactDOM from 'react-dom';

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';

// Demo styles, see 'Styles' section below for some notes on use.
import 'react-accessible-accordion/dist/fancy-example.css';

const Example = () => (
    <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Simple title</h3>
            </AccordionItemTitle>
            <AccordionItemBody>
                <p>Body content</p>
            </AccordionItemBody>
        </AccordionItem>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Complex title</h3>
                <div>With a bit of description</div>
            </AccordionItemTitle>
            <AccordionItemBody>
                <p>Body content</p>
            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
);

ReactDOM.render(<Example />, document.querySelector('[data-mount]'));

Answer 1

Any idea what is going wrong?

You put into your HTML using src.

The module is labelled as being a React component, you should import it into your React application not a regular HTML document.