react-select.browser.*.js doesn't work from the browser via cdn
See original GitHub issueI’m upgrading from react-select v2 (umd) which was possible to use directly from the browser via the cdn (there’s a recipe how to do it on stackoverflow: https://stackoverflow.com/a/53929535/237105).
What is the proper way (if any) to use v3 this way?
The https://unpkg.com/browse/react-select@3.1.0/dist/ distribution has two browser versions of react-select:
- react-select.browser.esm.js - which doesn’t get imported because browsers don’t currently work with bare modules:
<script type="module" src="https://unpkg.com/react-select@3.1.0/dist/react-select.browser.esm.js"></script>
Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".
and
- react-select.browser.cjs.js - which also throws an error because the common.js (https://lucivuc.github.io/browser-cjs/) doesn’t work with resources located in different directories.
This problem was mentioned several time in other tickets:
- @chulanovskyi https://github.com/JedWatson/react-select/issues/3583#issue-448750260
- @ErnestoBorio https://github.com/JedWatson/react-select/issues/3545#issue-440821052
- @ianstormtaylor https://github.com/JedWatson/react-select/issues/3585#issuecomment-640284972
- @cosminn777 https://github.com/JedWatson/react-select/issues/3585#issuecomment-540807618
Could you please comment on this issue and/or give a workaround for it.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:10 (1 by maintainers)
Top Results From Across the Web
Is it possible to use react-select in the browser from the cdn?
I figured out. Hope this can help others. Never give up. react-select v3 (v3.1.1 at this moment) doesn't have standalone lib anymore, ...
Read more >[SOLVED] How can I solve react-select library issue with CDN
It works perfectly using node_modules. The problem is I cannot seem to grab the correct CDNs for one of the libraries. That library...
Read more >Integrating with Other Libraries - React
Just rewrite the string based rendering as a React component. You can have as many such isolated components as you like, and use...
Read more >How to import from React-Select CDN with React and Babel
In ReactJs, import from React-Select CDN is not done in a simple ... Step to run the application: Open the HTML file in...
Read more >Load Time Optimization Techniques for React Apps - LeanyLabs
The Cache-Control header instructs the browser and proxies on how to cache your resource, avoiding multiple requests to your server. While it doesn't...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Great Job @ahatchkins
I had been following the UMD issue on the v3 upgrade guide and wasn’t aware that you could do this with Pika/Skypack until I saw your comment.
I tested it and found a few issues and that your demo can be reduced in size as shown below:
<script>
and once asimport { createElement } ..
. In the version below I kept the<script>
.data-type="module"
so the version below uses the latest version of Babel Standalone 7.data-type="module"
was added in7.10.0
. With Babel 7 the extra<script type="module">
is not needed.cdn.skypack.dev
ascdn.pika.dev
now redirects there.Additionally I currently have babel commented out and am using a small JSX Complier I wrote (5.7 kB gzip and min)
jsxLoader.min.js
so the demo loads very fast now and still uses JSX. Off topic but I wrote the JSX Compiler so I can use React and JSX in a browser on production sites without having to have a build process or having to include Babel Standalone which is very large.React Select 3 Demo using CDN https://awesome-web-react.js.org/examples/select-controls/react-select-3.htm
Working Hello World Demo
Awesome! Great work @ConradSollitt !
I’ll close this out and reference this thread for future use interested in having react-select as a standalone.