Refused to apply style from 'https://unpkg.com/react-select@2.0.0-alpha.8/dist/react-select.css'

[Vadorequest]

Something has changed on https://unpkg.com/react-select@2.0.0-alpha.8/dist/react-select.css whihc is the official CSS way of rendering react-select. Basically, they deleted the file, or made some change that makes it unavailable right now.

All applications based on react-select, which are using this css file from https://unpkg.com/ are failing right now.

This happened like 30mn ago.

---

Official workaround:

• Use specific version https://unpkg.com/react-select@1.2.1/dist/react-select.css instead of dynamic one https://unpkg.com/react-select/dist/react-select.css (very important to do so, since V2 will be released soon and anyone use the dynamic version will get the v2 instead of v1.2.1)

Workarounds while waiting for an official solution from react-select authors/contributors:

• Use my personal CDN: https://storage.googleapis.com/studylink-loan-advisor/react-select-v1.2.1.min.css (temporary solution, don't rely on this for long-term solution, only use this if you are in a hurry) see Refused to apply style from 'https://unpkg.com/react-select@2.0.0-alpha.8/dist/react-select.css' #2452 (comment)
• Local import import 'react-select/dist/react-select.css'; (or alike, using bower, etc.)
• Copy the official CSS file and host it on your own CDN https://raw.githubusercontent.com/JedWatson/react-select/v1.2.1/dist/react-select.min.css

[tyler-dot-earth]

I'll throw a +1 in; I went to use this package and found that node_modules/react-select/dist/react-select.css wasn't present at all. I will also note that going back to alpha 7 via npm i -S react-select@v2.0.0-alpha.7 does not make this css file show up.

Related issues?: #1592

[Vadorequest]

I tried all alpha version and none work, I have no idea how unpckg works and who has access to those files, neither why they got deleted, but the fastest workaround I can think of is to use another CDN.

If someone has a version of the CSS file available somewhere it'd would be nice, I just looked into the react-select repo and couldn't find the dist folder for the alpha versions either. I guess we need to recompile it and put it on another CDN (or fix the existing one)
https://github.com/JedWatson/react-select/tree/v2.0.0-alpha.8/dist

Either way, I'll move it to my own CDN, this just can't happen in production, it's way too sensitive. I wonder how many people have been affected.

[lgoudriaan]

I have this issue too 😭

[crimclark]

as a workaround you can just pull the file directly from the repo and host it yourself for now - https://raw.githubusercontent.com/JedWatson/react-select/v1.2.1/dist/react-select.min.css

[Vadorequest]

Beware the version though, the link given by @crimclark is for 1.2.1, not 2.0.0-alpha.8

[lgoudriaan]

If you have installed this via a package manager you can get the file from your dist folder locally :)

[Vadorequest]

It's not that simple @lgoudriaan. I just checked and I installed the react-select@1.2.1 as node package, but unpkg redirects me to a broken 2.0.0-alpha8 for the css with the link given in the official documentation, I don't know why really.

I'm gonna give it a try with the 1.2.1 and see how it goes.

[Vadorequest]

I tried with the https://raw.githubusercontent.com/JedWatson/react-select/v1.2.1/dist/react-select.min.css but it didn't work, I got the file, but the MIME was wrong and style was broken as well.

If you need a quick fix for 1.2.1, here is my own CDN link:
https://storage.googleapis.com/studylink-loan-advisor/react-select-v1.2.1.min.css

Note that I don't know how much time it'll stay there, probably a few weeks/months at least, use it if you need a quick fix, but better switch over a more official/stable link once this issue is resolved.

I have no idea why my app tried to load the 2.0.0-alpha8 version, and I don't know if I was using the 1.2.1 or the 2.0.0-alpha 8 prior to the bug (because the link https://unpkg.com/react-select/dist/react-select.css seems to redirect to a dynamic page), but it works with 1.2.1 as it did before.

[tvsudhir3]

We may import CSS from library itself.

import 'react-select/dist/react-select.css';

Worked for me.

[zhaoyi0113]

Same here, there is no css file in the dist directory

[jgcmarins]

@tvsudhir3 where did you used this import?
I've tried import and got this:

ERROR in ./node_modules/react-select/dist/react-select.css
Module parse failed: Unexpected token (8:0)
You may need an appropriate loader to handle this file type.
|  * MIT License: https://github.com/JedWatson/react-select
| */
| .Select {
|   position: relative;
| }

[Vadorequest]

@jgcmarins You didn't configure your webpack with a plugin that loads CSS files, that's why.

You may need an appropriate loader to handle this file type.

I can't guide you through this, though.

[tvsudhir3]

@jgcmarins Webpack config (in this context, if it helps):

module: {
  rules: [
    ...
    {
      test: /\.css\/,
      use: [{ loader: 'style-loader'}, { loader: 'css-loader' }],
    }
    ...
  ],
},

resolve: {
  ...
  extensions: ['.css']
  ...
}

[jgcmarins]

solved this adding css-loader to my webpack config file.

[sergical]

Still no official fix? 😢

[blb451]

Having the same issue (already resolved a temporary fix).

[Vadorequest]

@JedWatson Ping, did you notice this issue?

[JedWatson]

I'm trying to sort this out now

[JedWatson]

So it looks like there was an issue with the tag in the latest release. I swear I added the --tag next cli argument when I published, but the problem is that alpha.8 got set to the latest tag on npm - which makes unpkg load that version when you don't specify one in the URL.

I've set latest back to 1.2.1 which includes the css file, and should resolve this for now.

IMPORTANT INFORMATION

When v2.0 final is released (out of alpha/beta) it will become the latest version on npm and anybody who is loading the css file from unpkg without a specific version number will get the new version which does not include the css file.

Before that happens, please make sure you replace any unversioned references to react-select on unpkg with the version that matches what you actually have installed. For example:

<link rel="stylesheet" href="https://unpkg.com/react-select/dist/react-select.css" />

absolutely must be replaced with

<link rel="stylesheet" href="https://unpkg.com/react-select@1.2.1/dist/react-select.css" />

[Vadorequest]

@JedWatson Better change the doc so that new users take the 1.2.1 version from now on, nobody wants to do a major upgrade without being notified first. ;)

[vidurajith-darshana]

It works for me..Thanks @JedWatson ..
I used this for styles <link rel="stylesheet" href="https://unpkg.com/react-select@1.2.1/dist/react-select.css" />