title: No loading/serving of stylesheets - react
body: <p>I am attempting SSR with React router's <code>StaticRouter</code>. </p>
  
  <p><strong>express.js</strong> <em>(server)</em></p>
  
  <pre><code>const html = ReactDOMServer.renderToString(
      &lt;StaticRouter location={req.url} context={context}&gt;
          &lt;App /&gt;
      &lt;/StaticRouter&gt;
  );
  
  res.status(200).send(`
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
          &lt;head&gt;
              &lt;link rel="stylesheet" href="/app.css" type="text/css"/&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;div id="app"&gt;${html}&lt;/div&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  `);
  </code></pre>
  
  <p>Serving of static files:</p>
  
  <pre><code>app.use(express.static(path.resolve(__dirname, "../dist/client")));
  </code></pre>
  
  <p><strong>App.js</strong> <em>(shared)</em></p>
  
  <pre><code>import React from "react";
  import { Switch, Route } from "react-router";
  
  export default () =&gt; {
      return (
          &lt;Switch&gt;
              ...
          &lt;/Switch&gt;
      );
  };
  </code></pre>
  
  <p><strong>index.jsx</strong> <em>(client)</em></p>
  
  <pre><code>import React from "react";
  import { BrowserRouter } from "react-router-dom";
  import ReactDOM from "react-dom";
  import App from "./App";
  
  ReactDOM.render(
      &lt;BrowserRouter&gt;
          &lt;App/&gt;
      &lt;/BrowserRouter&gt;,
      document.getElementById("app")
  );
  </code></pre>
  
  <p><strong>./styles/Main.scss</strong></p>
  
  <pre><code>.header {
      background-color: #002933;
  }
  </code></pre>
  
  <p>I have 2 webpack configurations, 1 for the client &amp; 1 for the server:</p>
  
  <p><strong>webpack.config.dev.js</strong></p>
  
  <pre><code>const nodeExternals = require("webpack-node-externals");
  const webpack = require("webpack");
  const ExtractTextPlugin = require("extract-text-webpack-plugin");
  
  module.exports = {
      devtool: "cheap-module-eval-source-map",
      entry: {
          app: [
              "eventsource-polyfill",
              "webpack-hot-middleware/client",
              "webpack/hot/only-dev-server",
              "react-hot-loader/patch",
              "./client/index.jsx",
          ],
          vendor: [
              "react",
              "react-dom",
          ],
      },
      output: {
          path: `${__dirname}/dist/client`,
          ...
      },
      ...
      module: {
          loaders: [
              ...
              }, {
                  test: /\.scss$/,
                  exclude: /node_modules/,
                  loader: ExtractTextPlugin.extract({
                      fallback: "style-loader",
                      use: [
                          {
                              loader: "css-loader",
                              query: {
                                  localIdentName: "[hash:8]",
                                  modules: true
                              }
                          }, {
                              loader: "postcss-loader"
                          }, {
                              loader: "sass-loader"
                          }
                      ]
                  }),
              },
          ],
      },
      plugins: [
          new ExtractTextPlugin({
              filename: "[name].css",
              allChunks: true
          }),
      ]
  };
  </code></pre>
  
  <p><strong>webpack.config.server.js</strong></p>
  
  <pre><code>const ExternalsPlugin = require("webpack-externals-plugin");
  
  module.exports = {
      ...
      output: {
          path: `${__dirname}/dist/`,
          filename: "server.bundle.js",
      },
      ...
      resolve: {
          ...
          modules: [
              "client",
          ],
      },
      module: {
          loaders: [
              {
                  test: /\.(js|jsx)$/,
                  exclude: /node_modules/,
                  loader: "babel-loader",
              }, {
                 test: /\.scss$/,
                 loader: 'style-loader!css-loader/locals?module&amp;localIdentName=[name]__[local]___[hash:base64:5]!sass-loader',
              },
          ],
      },
      plugins: [
          new ExternalsPlugin({
              type: "commonjs",
              include: `${__dirname}/node_modules/`,
          }),
      ],
  };
  </code></pre>
  
  <p>I have a JSX file where the <code>.header</code> should be applied to:</p>
  
  <pre><code>import React from "react";
  
  import Links from "./Links.jsx";
  import profilePic from "../../img/brand/profilePic.jpg";
  
  import styles from "../../styles/Main.scss";
  
  export default class Header extends React.Component {
      constructor() {
          super();
      }
  
      render() {
          return (
              &lt;header className={styles.header}&gt;
                  &lt;img src={profilePic} alt="Professional Picture"/&gt;
                  &lt;h5&gt;{this.props.pageName}&lt;/h5&gt;
                  &lt;Links/&gt;
              &lt;/header&gt;
          );
      }
  }
  </code></pre>
  
  <p>This throws the error:</p>
  
  <pre><code>TypeError: Cannot read property 'header' of undefined
      at Header.render (E:/Documents/Projects/website/client/js/components/Header.jsx:22:30)
      at resolve (E:\Documents\Projects\website\node_modules\react-dom\cjs\react-dom-server.node.development.js:2149:18)
      at ReactDOMServerRenderer.render (E:\Documents\Projects\website\node_modules\react-dom\cjs\react-dom-server.node.development.js:2260:22)
      at ReactDOMServerRenderer.read (E:\Documents\Projects\website\node_modules\react-dom\cjs\react-dom-server.node.development.js:2234:19)
      at Object.renderToString (E:\Documents\Projects\website\node_modules\react-dom\cjs\react-dom-server.node.development.js:2501:25)
      at E:/Documents/Projects/website/server/config/lib/express.js:204:31
      at Layer.handle [as handle_request] (E:\Documents\Projects\website\node_modules\express\lib\router\layer.js:95:5)
      at trim_prefix (E:\Documents\Projects\website\node_modules\express\lib\router\index.js:317:13)
      at E:\Documents\Projects\website\node_modules\express\lib\router\index.js:284:7
      at Function.process_params (E:\Documents\Projects\website\node_modules\express\lib\router\index.js:335:12)
      at next (E:\Documents\Projects\website\node_modules\express\lib\router\index.js:275:10)
      at p3p (E:\Documents\Projects\website\node_modules\lusca\lib\p3p.js:15:9)
      at E:\Documents\Projects\website\node_modules\lusca\index.js:59:28
      at xframe (E:\Documents\Projects\website\node_modules\lusca\lib\xframes.js:12:9)
      at E:\Documents\Projects\website\node_modules\lusca\index.js:59:28
      at xssProtection (E:\Documents\Projects\website\node_modules\lusca\lib\xssprotection.js:16:9)
  </code></pre>
  
  <p>When running the application, webpack reports that the stylesheet <strong>has</strong> been loaded:</p>
  
  <p><a href="https://i.stack.imgur.com/3lOSa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3lOSa.png" alt="enter image description here"></a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Other than an ES6 import, I have attempted to use CommonJS' <code>require()</code> as in <a href="https://github.com/Hashnode/mern-starter/blob/master/client/App.js#L13" rel="nofollow noreferrer">MERN</a> but still no look...</p>
  
  <p>When I build my server webpack config, I am now getting the error:</p>
  
  <pre><code>ERROR in (webpack)-dev-middleware/node_modules/mime/index.js
  Module not found: Error: Can't resolve './types/standard' in 'E:\Documents\Projects\website\node_modules\webpack-dev middleware\node_modules\mime'
   @ (webpack)-dev-middleware/node_modules/mime/index.js 4:26-53
   @ (webpack)-dev-middleware/index.js
   @ ./server/config/lib/express.js
   @ ./server/config/lib/app.js
   @ ./server/server.js
  </code></pre>
  
  <p>I am not sure if this a red-herring or not in this situation or not but thought it worth mentioning here as I am quite lost. Feel as though I am clutching at straws at this point.</p>
  
  <p>This is my <code>.babelrc</code>:</p>
  
  <pre><code>{
      "presets": [
          "react",
          "es2015",
          "stage-0"
      ],
      "plugins": [
          "react-hot-loader/babel",
          "transform-decorators-legacy"
      ],
      "env": {
          "server": {
              "plugins": [
                  [
                      "css-modules-transform", {
                          "preprocessCss": "./loaders/sass-loader.js",
                          "generateScopedName": "[hash:8]",
                          "extensions": [".scss"]
                      }
                  ]
              ]
          },
          "production": {
              "presets": [
                  "es2015",
                  "react",
                  "react-optimize",
                  "es2015-native-modules",
                  "stage-0"
              ]
          }
      }
  }
  </code></pre>
  
  <p>I was attempting to go back to basics and have my babel handle server-side bundling instead of webpack. This was built from a <a href="https://medium.com/@mattvagni/server-side-rendering-with-css-modules-6b02f1238eb1" rel="nofollow noreferrer">tutorial</a> for SSR with CSS modules I was kindly linked to by @mootrichard</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>A few observations which might help...when using an es6 import for stylesheets:</p>
  
  <pre><code>import styles from "../../styles/Main.scss";
  </code></pre>
  
  <p>and log <code>styles</code> into the console, it returns <strong>undefined</strong> <em>(evidence that it cannot find the file for some reason)</em>.</p>
  
  <p>When putting the <code>&lt;link&gt;</code> tag in the <code>head</code> for the initial page, the <code>&lt;link&gt;</code> tag is present in the markup but <strong>not</strong> in the network:</p>
  
  <p><a href="https://i.stack.imgur.com/Ek8xh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ek8xh.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/GzY21.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GzY21.png" alt="enter image description here"></a></p>
  
  <p>However, when navigating to <code>localhost:8000/app.css</code>, a positive response with the styling is sent back:</p>
  
  <p><a href="https://i.stack.imgur.com/WyWBU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WyWBU.png" alt="enter image description here"></a></p>
  
  <p>If the browser can find the bundled version standalone, then why is it not being loaded in my initial page? <em>(The path is correct)</em></p>