Node/Express - Refused to apply style because its MIME type ('text/html') : <p>I've been having this issue for the past couple of days and can't seem to get to the bottom of this. We doing a very basic node/express app, and are trying to serve our static files using something like this:</p>

<pre><code>app.use(express.static(path.join(__dirname, "static")));
</code></pre>

<p>This does what I expect it to for the most part. We have a few folders in our static folder for our css and javascript. We're trying to load our css into our EJS view using this static path:</p>

<pre><code>&lt;link rel="stylesheet" type="text/css" href="/css/style.css"&gt;
</code></pre>

<p>When we hit our route <code>/</code>, we're getting all of the content but our CSS is not loading. We're getting this error in particular:</p>

<blockquote>
  <p>Refused to apply style from '<a href="http://localhost:3000/css/style.css" rel="noreferrer">http://localhost:3000/css/style.css</a>'
  because its MIME type ('text/html') is not a supported stylesheet MIME
  type, and strict MIME checking is enabled.</p>
</blockquote>

<h2>What I've tried:</h2>

<ol>
<li>Clear NPM Cache / Fresh Install

<ul>
<li><code>npm verify cache</code></li>
<li><code>rm -rf node_modules</code></li>
<li><code>npm install</code></li>
</ul></li>
<li>Clear Browser Cache</li>
<li>Various modifications to folder names and references to that</li>
<li>Adding/removing forward slashes form the href</li>
<li>Moving the css folder into the root and serving it from there</li>
<li>Adding/removing slashes from <code>path.join(__dirname, '/static/')</code></li>
<li>There was a comment about a service worker possibly messing things up in a github issue report, and seemed to fix a lot of people's problems. There is no service worker for our localhost: <a href="https://github.com/facebook/create-react-app/issues/658" rel="noreferrer">https://github.com/facebook/create-react-app/issues/658</a> 

<ul>
<li>We're not using react, but I'm grasping at any google search I can find</li>
</ul></li>
</ol>

<h2>The route:</h2>

<pre><code>app.get("/", function(req, res) {
    res.render("search");
});
</code></pre>

<h2>The view:</h2>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Search for a Movie&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="/static/css/style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Search for a movie&lt;/h1&gt;
        &lt;form method="POST" action="/results"&gt;
            &lt;label for="movie-title"&gt;Enter a movie title:&lt;/label&gt;&lt;br&gt;
            &lt;input id="movie-title" type="text" name="title"&gt;&lt;br&gt;
            &lt;input type="submit" value="Submit Search"&gt;
        &lt;/form&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<h2>The package.json:</h2>

<pre><code>{
  "name": "express-apis-omdb",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js",
    "lint:js": "node_modules/eslint/bin/eslint.js ./ ./**/*.js --fix; exit 0",
    "lint:css": "node_modules/csslint/cli.js public/css/; exit 0"
  },
  "license": "ISC",
  "devDependencies": {
    "babel-eslint": "^6.0.4",
    "csslint": "^0.10.0",
    "eslint": "^2.11.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.8.1",
    "eslint-plugin-jsx-a11y": "^1.3.0",
    "eslint-plugin-react": "^5.1.1"
  },
  "dependencies": {
    "body-parser": "^1.18.2",
    "dotenv": "^5.0.0",
    "ejs": "^2.5.7",
    "express": "^4.13.4",
    "morgan": "^1.7.0",
    "path": "^0.12.7",
    "request": "^2.83.0"
  }
}
</code></pre>

<h2>The project structure:</h2>

<pre><code>-app
--node_modules
--static
---img
---css
---js
--views
---movie.ejs
---results.ejs
---search.ejs
--index.js
--package-lock.json
--package.json
</code></pre>

<p><strong>Note:</strong> We are currently not using a layout file for our EJS. </p>

<p>I'm happy to provide additional details if needed.</p>
