react-select component, not rendering - reactjs

Question

react: ^15.4.2,
react-select: ^1.0.0-rc.10,
Example.tsx
import * as React from 'react';
import Select from 'react-select';
// Be sure to include styles at some point, probably during your bootstrapping
import 'react-select/dist/react-select.css';
var Select = require('react-select');
var options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
];
function logChange(val) {
console.log("Selected: " + JSON.stringify(val));
}
export class Example extends React.Component<any, any> {
render() {
return (
<div>
<Select name="form-field-name" value="one" options={options} onChange={logChange}/>
</div>
);
}
}
No errors reported at compile time.
Get an error message when attempting to render it
React.createElement: type is invalid -- expected a string (for
built-in components) or a class/function (for composite components)
but got: object. Check the render method of Example.
in Example
Being this is my first react project I have no idea how to debug this. I do not see anything wrong with this code.
Here is my render out of main.tsx
(() => {
const container = document.querySelector('#container');
render( <Example />, container);
})();

Answer 1

Well, from the example above which is copy-pasted from react-select docs seems that everything is alright. The error says that you try to render something that is not being able to render (here it says it's some Object).
My bet is this line causes the error:
import Select from 'react-select';
are you sure you properly installed this package?

Answer 2

Try to usw curly brackets arround Select in your import statement:
import {Select} from...
If there are no "default" export defined, you have to use those curly bracets to define the component you want to use.

Answer 3

import * as React from 'react';
import Select from 'react-select';
// Be sure to include styles at some point, probably during your bootstrapping
import 'react-select/dist/react-select.css';
export class Example extends React.Component<any, any> {
var options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
];
function logChange(val) {
console.log("Selected: " + JSON.stringify(val));
}
render() {
return (
<div>
<Select name="form-field-name" value="one" options={options} onChange={logChange}/>
</div>
);
}
}

Answer 4

import React, { Component } from 'react';
import Select from 'react-select';
class App extends Component {
state = {options: [
{
value: '1', label: 'Option 1',
},
{
value: '2', label: 'Option 2',
}
]}
render(){
return (
<div>
<Select
className={"select-item"}
name="option name"
onChange={this.changeHandler}
options={this.state.options}
/>
</div>
)
}
}

Answer 5

Quick answer, this should work:
Demo: https://codesandbox.io/s/stupefied-vaughan-z4mkv?file=/src/Example.tsx
import * as React from "react";
import Select from "react-select";
// Be sure to include styles at some point, probably during your bootstrapping
import "react-select/dist/react-select.css";
var options = [
{ value: "one", label: "One" },
{ value: "two", label: "Two" }
];
function logChange(val) {
console.log("Selected: " + JSON.stringify(val));
}
export default class Example extends React.Component<any, any> {
render() {
return (
<div>
<Select
name="form-field-name"
value="one"
options={options}
onChange={logChange}
/>
</div>
);
}
}
Reason for error:
Either use export default class Example extends React.Component<any, any> {, or in whichever file you are importing and using <Example />, import it as import { Example } from './path/to/file'. Not using the default export specifier or named import in the importing file is causing the error. Read imports / exports in js
Things to do:
Remove var Select = require('react-select');. This is the same as import Select from 'react-select';, just in a different import format (read about ESM and CommonJS to learn more). We should avoid importing components
Use import React from 'react' instead.