Resource interpreted as Stylesheet but transferred with MIME type text/plain

Frontend Web Development: The Big Nerd Ranch Guide Chapter 17: Using ES6 with Babel
1

Hello, I’ve got this error message instead of ‘Hello ES6!’ in Figure 17.9

Resource interpreted as Stylesheet but transferred with MIME type text/plain: “http://localhost:3000/stylesheets/styles.css”.

Can you help me to solve this issue?
Thanks.

2

Hi @espressohn, “Resource interpreted as Stylesheet but transferred with MIME type text/plain” is just a warning so no worries. It means your server isn’t sending over a header to help it figure out that it’s a CSS file. Thankfully, the browser is smart and made an educated guess.

If your code is not yet printing “Hello ES6” is sounds like you might have a build issue, does anything look amiss when you run babel app/scripts/src/app.js -o app/scripts/dist/main.js ? Also, double check that there are transpiled contents in app/scripts/dist/main.js

3

Thank you for your help!

4

the messages are not formatted according to the styles.css. It is just displaying the name, message and time as plain text.
the stylesheet link is included in the html file but it is not being applied.

5

I just had this same issue today. No Console output for “Hello ES6!”, but also no errors on the babel compilation. Actually, looking at the app/scripts/dist/main.js file it still only has:

"use strict";

after the compilation line.
babel app/scripts/src/app.js -o app/scripts/dist/main.js

What should it have?

NEVERMIND, this made me realize I hadn’t saved the app.js file. That’s all it was.
I’ll leave this here as a warning lol.

P.S. You can fix the css warning by adding type=“text\css” to the line in index.html:
<link rel="stylesheet" href="/stylesheets/styles.css" type="text\css">