SyntaxError: Select.js: Unexpected token, expected "," (3:32)

I tried to run the example code but React tells me that there’s a syntax error in the library:

My code (the example)

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
];

export default function App() {
    const [selectedOption, setSelectedOption] = useState(null);

    return (
        <div className="App">
            <Select
                defaultValue={selectedOption}
                onChange={setSelectedOption}
                options={options}
            />
        </div>
    );
}

I’m using React 17.0.1 and react-select ^3.1.0.

[trodix]

@realmayus It’s because the code is written in Flow, which is typing superset over Javascript. I think the problem is well readable from the screenshot you’ve attached – if you look on the line 3, above the ^ sign (which highlights the place where the error happened) you see there is keyword type which you do not know from JS world. Try to remove it and you’ll see what happens next.

I’ve found the solution !

vscode auto-import added this line : import Select from 'react-select/src/Select; But you actually need to import the Select component from react-select with import Select from 'react-select

[dakur]

@realmayus It’s because the code is written in Flow, which is typing superset over Javascript. I think the problem is well readable from the screenshot you’ve attached – if you look on the line 3, above the ^ sign (which highlights the place where the error happened) you see there is keyword type which you do not know from JS world. Try to remove it and you’ll see what happens next.