title: Node/Express - Refused to apply style because its MIME type ('text/html')
body: <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>