MIME type error for rise.css

[rabernat]

I am trying to use rise.css custom CSS file to style my slideshow. In my javascript console, I'm seeing the error message:

Refused to apply style from 'http://127.0.0.1:8888/edit/book/rise.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I am using notebook v6.4.4. To reproduce, just create any slideshow and add a rise.css file in the notebook directory.

I'm not sure which layer of the stack this error is from. But as encouraged by @damianavila I am reporting it here.

p.s. I'm on Mac-OS with Google Chrome in case it makes a difference.

[rabernat]

A bit more detail. The name of my notebook is 02-b_the_water_column.ipynb.

I have created both

• 02-b_the_water_column.css
• rise.css

In the javascript console, when I start the slideshow by clicking the RISE button, I am seeing

Refused to apply style from 'http://127.0.0.1:8888/edit/book/02-b_the_water_column.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Refused to apply style from 'http://127.0.0.1:8888/edit/book/rise.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

The styles are NOT applied.

In the notebook logs, I am not seeing any 404s or other relevant messages.

---

If I remove the two css files, I see the following in the notebook logs.

[W 2021-09-16 21:04:14.565 NotebookApp] 404 GET /edit/book/rise.css (172.17.0.1) 11.06ms referer=http://127.0.0.1:8888/notebooks/book/02-b_the_water_column.ipynb
[W 2021-09-16 21:04:14.572 NotebookApp] 404 GET /edit/book/02-b_the_water_column.css (172.17.0.1) 5.96ms referer=http://127.0.0.1:8888/notebooks/book/02-b_the_water_column.ipynb

This is confusing because the javascript errors seems to be the same regardless of whether the files are actually there or not.

[rabernat]

Final note, and perhaps the key...

If I point my browser to http://127.0.0.1:8888/edit/book/rise.css, I get redirected to http://127.0.0.1:8888/edit/book/rise.css.

$ curl -i http://127.0.0.1:8888/edit/book/rise.css
HTTP/1.1 302 Found
Server: TornadoServer/6.1
Content-Type: text/html; charset=UTF-8
Date: Thu, 16 Sep 2021 21:08:06 GMT
X-Content-Type-Options: nosniff
Content-Security-Policy: frame-ancestors 'self'; report-uri /api/security/csp-report
Location: /login?next=%2Fedit%2Fbook%2Frise.css
Content-Length: 0

[damianavila]

@rabernat, I was not able to reproduce, so... some further questions:

• RISE version
• Chrome version
• Are you in a conda enviroment? If that is the case, I conda list would be nice. If you are not in conda, details about the environment would be welcome!
• Can you tar the directory containing the notebook and the ccs files and provide it? Or maybe even better, a repo with a minimal reproducible example!
• How are you starting the notebook app?

[rabernat]

I am actually running the whole thing inside a docker container like this:

git checkout https://github.com/rabernat/intro_to_physical_oceanography.git
docker run -it --rm --volume `pwd`/intro_to_physical_oceanography:/intro_to_physical_oceanography -p 8888:8888 pangeo/pangeo-notebook:latest /bin/bash -c "mamba install --yes -n notebook -c conda-forge rise ipytree nbgitpuller==1.0.2 notebook=6.4.4; jupyter lab --ip 0.0.0.0 /intro_to_physical_oceanography"

[rabernat]

• Chrome version

93.0.4577.63

[damianavila]

How are you starting the notebook app?

OK, you replied with that docker command :wink:

jupyter lab --ip 0.0.0.0

I suspect the issue might be related to the fact that jupyterlab is using the new jupyter-server whereas the jupyter notebook is still on the old one...

Can you try your docker command with jupyter notebook instead of jupyter lab?

Btw, I tried to use the pangeo image you referenced but it is not working for me with the command you shared... I also tried locally with your repo and I was able to reproduce the issue when I use jupyter lab instead of the jupyter notebook.

[rabernat]

Btw, I tried to use the pangeo image you referenced but it is not working for me with the command you shared...

Sorry, it was missing a " at the very end. (Copy-paste error.)

I tried using jupyter notebook instead of jupyter lab. Unfortunately it did not fix the issue. The full docker command I ran was.

docker run -it --rm --volume `pwd`/intro_to_physical_oceanography:/intro_to_physical_oceanography -p 8888:8888 pangeo/pangeo-notebook:latest /bin/bash -c "mamba install --yes -n notebook -c conda-forge rise ipytree nbgitpuller==1.0.2 notebook=6.4.4; jupyter notebook --ip 0.0.0.0 /intro_to_physical_oceanography"

[damianavila]

@rabernat, I tried the following command (pretty similar to your command, but without the volume stuff because I was getting weird permission issues):

docker run -it --rm -p 8888:8888 pangeo/pangeo-notebook:latest /bin/bash -c "mamba install --yes -n notebook -c conda-forge rise ipytree nbgitpuller==1.0.2 notebook=6.4.4; jupyter notebook --ip 0.0.0.0"

Uploaded your 02-b_the_water_column notebook and the rise.css file with some additional CSS to make the change more obvious:

(base) Damians-MacBook-Pro:intro_to_physical_oceanography damian$ git diff book/rise.css 
diff --git a/book/rise.css b/book/rise.css
index f60fb3f..cdcda54 100644
--- a/book/rise.css
+++ b/book/rise.css
@@ -29,4 +29,8 @@

 .reveal ul {
     display: block;
+}
+
+div.cell.code_cell.rendered, div.input_area {
+    border-width: 10px;
 }

And I can see the border... even with the error message:

Btw, on OSX and Chrome as well.

Could it be the case that your changes in the rise.css file are subtle and this is why you are not seeing it? Or maybe you are not changing the CSS as you wish?

For instance, I see the following in your rise.css file:

.reveal img.float-right {
    float: right;
}

and I think (and successfully tested) you may want to use this one?:

.reveal img {
    float: right;
}

[rabernat]

Ok thanks for the tip. I thought I had convinced myself that it was not working, but I will try again with these suggestions.

I appreciate your patience.

[damianavila]

I appreciate your patience.

Sure, happy to help!! Btw, I will keep this open to eventually fix the console error.