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

Question

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

Closed this issue 6 years ago · 21 comments

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

Answer 1 · 2018-03-20T19:48:28.000Z

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

Answer 2 · 2018-03-20T20:11:01.000Z

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.

Answer 3 · 2018-03-20T21:04:25.000Z

I have this issue too 😭

Answer 4 · 2018-03-20T21:06:06.000Z

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

Answer 5 · 2018-03-20T21:09:10.000Z

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

Answer 6 · 2018-03-20T21:14:10.000Z

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

Answer 7 · 2018-03-20T21:19:18.000Z

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.

Answer 8 · 2018-03-20T21:25:54.000Z

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.

Answer 9 · 2018-03-20T22:59:30.000Z

We may import CSS from library itself.

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

Worked for me.

Answer 10 · 2018-03-21T10:48:47.000Z

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

Answer 11 · 2018-03-21T19:12:55.000Z

@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;
| }

Answer 12 · 2018-03-21T19:15:10.000Z

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

Answer 13 · 2018-03-21T19:43:56.000Z

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

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

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

Answer 14 · 2018-03-21T20:15:43.000Z

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

Answer 15 · 2018-03-22T19:50:44.000Z

Still no official fix? 😢

Answer 16 · 2018-03-22T19:59:10.000Z

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

Answer 17 · 2018-03-22T20:51:33.000Z

@JedWatson Ping, did you notice this issue?

Answer 18 · 2018-03-22T21:21:07.000Z

I'm trying to sort this out now

Answer 19 · 2018-03-22T21:29:31.000Z

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" />

Answer 20 · 2018-03-23T09:41:08.000Z

@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. ;)

Answer 21 · 2018-05-27T03:32:15.000Z

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" />