Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

react-select.browser.*.js doesn't work from the browser via cdn

See original GitHub issue

I’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:

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 GitHub Comments

3reactions

ConradSollittcommented, Dec 4, 2020

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:

React was included twice once as <script> and once as import { createElement } ... In the version below I kept the <script>.
Your snippet was using Babel Standalone 6 which doesn’t support data-type="module" so the version below uses the latest version of Babel Standalone 7. data-type="module" was added in 7.10.0. With Babel 7 the extra <script type="module"> is not needed.
For the import I switched to cdn.skypack.dev as cdn.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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React-Select!</title>

    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
     
    <!-- <script src="https://unpkg.com/@babel/standalone@7.12.9/babel.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5.4.0/js/react/jsxLoader.min.js"></script>
  </head>

  <body>
    <div id="app"></div>
    <script type="text/babel" data-type="module">
      import Select from 'https://cdn.skypack.dev/react-select@^3.1.0';
      const options = [
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' }
      ]
      ReactDOM.render(<Select options={options}/>, document.querySelector('#app'));
    </script>
  </body>
</html>

2reactions

ebonowcommented, Dec 5, 2020

Awesome! Great work @ConradSollitt !

I’ll close this out and reference this thread for future use interested in having react-select as a standalone.

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, ...

[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...

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...

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...

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...