Can I use React-Select Async (AsyncSelect) from a CDN? (I'm getting Uncaught ReferenceError: exports is not defined)
Question
As per the project manager's request, I can't bundle this with npm , so I'm stuck to using CDN versions of every library.
Everything is working well so far, React, Material-UI, React-Select and Babel.
But trying to include Async.js ( https://unpkg.com/react-select/lib/Async.js ) gives me Uncaught ReferenceError: exports is not defined
I see that in https://unpkg.com/react-select/dist/react-select.js there are references to Async & AsyncSelect but I can't figure out how to use the AsyncSelect component as shown in https://react-select.com/async
This is how I'm using the libraries:
<script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js"></script>
<script src="https://unpkg.com/react-select@2.1.2/dist/react-select.js"></script>
<!-- ... and other dependencies -->
1 answers
solution1
2 ACCPTED 2019-05-06 18:29:09
If you refer to this other question and copy / paste all the dependencies in this answer, you will be able to access react-select elements.
<script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/emotion@9.2.12/dist/emotion.umd.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.min.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.2.1/dist/react-input-autosize.min.js"></script>
<script src="https://unpkg.com/react-select@2.1.2/dist/react-select.min.js"></script>
Once that done Async specific component will be reachable via Select.Async like the following example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/emotion@9.2.12/dist/emotion.umd.min.js"></script> <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/prop-types@15.5.10/prop-types.min.js"></script> <script src="https://unpkg.com/react-input-autosize@2.2.1/dist/react-input-autosize.min.js"></script> <script src="https://unpkg.com/react-select@2.1.2/dist/react-select.min.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const options = [ { value: 'chocolate', label: 'Chocolate' }, { value: 'strawberry', label: 'Strawberry' }, { value: 'vanilla', label: 'Vanilla' } ]; class App extends React.Component { state = { selectedOption: null, } handleChange = (selectedOption) => { this.setState({ selectedOption }); console.log(`Option selected:`, selectedOption); } render() { const { selectedOption } = this.state; return ( <div> Test Text <Select.Async value={selectedOption} onChange={this.handleChange} options={options} /> </div> ); } } ReactDOM.render(<App/>, document.querySelector("#root")) </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.