title: React Universal Webpack CSS-loader issue
body: <p>Does any one know what this Webpack error is caused by:</p>
  
  <blockquote>
    <p><em>Module build failed: Unknown word (2:1)</em></p>
    
    <p><em>var content = require("!!../../../../../../node_modules/css-loader/index.js?{\"importLoaders\":1}!./styles.css");</em></p>
    
    <p><em>if(typeof content === 'string') content = [[module.id, content, '']];</em></p>
  </blockquote>
  
  <p>This occurs when running two instances of webpack, one for the client and one for the server. The client compile fine, however the server prodcuces this error. If I run the config scripts separately there are no issues. I'm assuming there is some kind of conflict with the same CSS file being processed twice? I would like to be able to implement isomorphic-style-loader however even with this loader in replace of style-loader the error occurs. Any help would be greatly appreciated, hit a wall with this one.</p>
  
  <p>start.js</p>
  
  <pre><code>'use strict';
  
  // Do this as the first thing so that any code reading it knows the right env.
  process.env.BABEL_ENV = 'development';
  process.env.NODE_ENV = 'development';
  
  // Makes the script crash on unhandled rejections instead of silently
  // ignoring them. In the future, promise rejections that are not handled will
  // terminate the Node.js process with a non-zero exit code.
  process.on('unhandledRejection', err =&gt; {
    throw err;
  });
  
  // Ensure environment variables are read.
  require('../config/env');
  
  const { exec } = require('child_process');
  const fs = require('fs');
  const chalk = require('chalk');
  const webpack = require('webpack');
  const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
  const WebpackDevServer = require('webpack-dev-server');
  const clearConsole = require('react-dev-utils/clearConsole');
  const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
  const {
    choosePort,
    createCompiler,
    prepareProxy,
    prepareUrls,
  } = require('react-dev-utils/WebpackDevServerUtils');
  const openBrowser = require('react-dev-utils/openBrowser');
  const paths = require('../config/paths');
  
  // const useYarn = fs.existsSync(paths.yarnLockFile);
  const isInteractive = process.stdout.isTTY;
  
  // Warn and crash if required files are missing
  //if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
  if (!checkRequiredFiles([paths.appIndexJs])) {
    process.exit(1);
  }
  
  // Tools like Cloud9 rely on this.
  const DEFAULT_CLIENT_PORT = parseInt(process.env.PORT, 10) || 3000;
  const DEFAULT_SERVER_PORT = parseInt(process.env.PORT, 10) || 5678;
  const HOST = process.env.HOST || '0.0.0.0';
  
  // We attempt to use the default port but if it is busy, we offer the user to
  // run on a different port. `detect()` Promise resolves to the next free port.
  choosePort(HOST, DEFAULT_CLIENT_PORT)
    .then(port =&gt; {
      if (port == null) {
        // We have not found a port.
        return;
      }
  
      const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
      const appName = require(paths.appPackageJson).name;
      const urls = prepareUrls(protocol, HOST, port);
  
      // We do this before importing the wepack.config.client.dev otherwise
      // REACT_APP_CLIENT_PORT won't be set at new webpack.DefinePlugin(env.stringified)
      process.env.REACT_APP_CLIENT_PORT = port
      const configWebpackClient = require('../config/webpack.config.client.dev');
  
      // Create a webpack compiler that is configured with custom messages.
      // we use different compiler
      //const compiler = createCompiler(webpack, configWebpackClient, appName, urls, useYarn);
      const compiler = webpack(configWebpackClient);
  
      // Load proxy config
      const proxySetting = require(paths.appPackageJson).proxy;
      const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
      const createDevServerConfig = require('../config/webpackDevServer.config');
      // Serve webpack assets generated by the compiler over a web sever.
  
      const serverConfig = createDevServerConfig(
        proxyConfig,
        urls.lanUrlForConfig
      );
  
      const clientServer = new WebpackDevServer(compiler, serverConfig);
  
      // Launch WebpackDevServer.
      clientServer.listen(port, HOST, err =&gt; {
        if (err) {
          return console.log(err);
        }
        if (isInteractive) {
          clearConsole();
        }
        console.log(chalk.cyan(`Starting the client on port ${port}...\n`));
  
        choosePort(HOST, DEFAULT_SERVER_PORT)
          .then(portServer =&gt; {
            if (portServer == null) {
              // We have not found a port.
              return;
            }
  
            process.env.REACT_APP_SERVER_PORT = portServer;
            const configWebpackServer = require('../config/webpack.config.server');
            const compiler = webpack(configWebpackServer);
            const urls = prepareUrls(protocol, HOST, portServer);
            let isServerRunning;
  
            compiler.watch({ // watch options:
              aggregateTimeout: 300,
            }, function(err, stats) {
  
              const messages = formatWebpackMessages(stats.toJson({}, true));
  
              if (messages.errors.length) {
                console.log(messages.errors.join('\n\n'));
              }
  
              if (err)
                console.log('error on webpack server', err);
  
              if (!isServerRunning) {
                isServerRunning = true
                const nodemon = exec('nodemon --watch build/server build/server/bundle.js build/server/bundle.js')
  
                // This is to outpout in the terminal the child process
                nodemon.stdout.on('data', function (data) {
                  console.log(data.toString());
                });
                nodemon.on('exit', function (code) {
                  console.log('nodemon process exited with code ' + code.toString());
                });
  
                console.log(chalk.yellow(`Starting the server on port ${portServer}...\n`));
                // setTimeout(() =&gt; { openBrowser(urls.localUrlForBrowser, {app: 'firefoxdeveloperedition'}) }, 1000);
              }
            });
          })
          .catch(err =&gt; {
            if (err &amp;&amp; err.message) {
              console.log(err.message);
            }
            process.exit(1);
          });
      });
      ['SIGINT', 'SIGTERM'].forEach(function(sig) {
        process.on(sig, function() {
          clientServer.close();
          process.exit();
        })
      });
    })
    .catch(err =&gt; {
      if (err &amp;&amp; err.message) {
        console.log(err.message);
      }
      process.exit(1);
    });
  </code></pre>
  
  <p>webpack.config.base.js</p>
  
  <pre><code>'use strict';
  
  const path = require('path');
  const webpack = require('webpack');
  // const HtmlWebpackPlugin = require('html-webpack-plugin');
  // const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  // const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  // const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
  const eslintFormatter = require('react-dev-utils/eslintFormatter');
  const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
  const getClientEnvironment = require('./env');
  const paths = require('./paths');
  
  const PROD = process.env.NODE_ENV === 'production';
  
  // `publicUrl` is just like `publicPath`, but we will provide it to our app
  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
  // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
  const publicUrl = '';
  // Get environment variables to inject into our app.
  
  const env = getClientEnvironment(publicUrl);
  
  // This is the development configuration.
  // It is focused on developer experience and fast rebuilds.
  // The production configuration is different and lives in a separate file.
  module.exports = {
    bail: PROD,
    // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
    // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
    devtool:  PROD ? 'source-map' : 'cheap-module-source-map',
    entry: [],
    output: {},
    resolve: {
      // This allows you to set a fallback for where Webpack should look for modules.
      // We placed these paths second because we want `node_modules` to "win"
      // if there are any conflicts. This matches Node resolution mechanism.
      // https://github.com/facebookincubator/create-react-app/issues/253
      modules: ['node_modules', paths.appNodeModules].concat(
        // It is guaranteed to exist because we tweak it in `env.js`
        process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
      ),
      // These are the reasonable defaults supported by the Node ecosystem.
      // We also include JSX as a common component filename extension to support
      // some tools, although we do not recommend using it, see:
      // https://github.com/facebookincubator/create-react-app/issues/290
      extensions: ['.js', '.json', '.jsx'],
      alias: {
  
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',
      },
      plugins: [
        // Prevents users from importing files from outside of src/ (or node_modules/).
        // This often causes confusion because we only process files within src/ with babel.
        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
        // please link the files into your node_modules/ and let module-resolution kick in.
        // Make sure your source files are compiled, as they will not be processed in any way.
        new ModuleScopePlugin(paths.appSrc),
      ],
    },
    module: {
      strictExportPresence: true,
      rules: [
        // TODO: Disable require.ensure as it's not a standard language feature.
        // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
        // { parser: { requireEnsure: false } },
  
        // First, run the linter.
        // It's important to do this before Babel processes the JS.
        {
          test: /\.(js|jsx)$/,
          enforce: 'pre',
          use: [
            {
              options: {
                formatter: eslintFormatter,
  
              },
              loader: require.resolve('eslint-loader'),
            },
          ],
          include: paths.appSrc,
        },
        // ** ADDING/UPDATING LOADERS **
        // The "file" loader handles all assets unless explicitly excluded.
        // The `exclude` list *must* be updated with every change to loader extensions.
        // When adding a new loader, you must add its `test`
        // as a new entry in the `exclude` list for "file" loader.
  
        // "file" loader makes sure those assets get served by WebpackDevServer.
        // When you `import` an asset, you get its (virtual) filename.
        // In production, they would get copied to the `build` folder.
        {
          exclude: [
            /\.html$/,
            /\.(js|jsx)$/,
            /\.css$/,
            /\.json$/,
            /\.bmp$/,
            /\.gif$/,
            /\.jpe?g$/,
            /\.png$/,
          ],
          loader: require.resolve('file-loader'),
          options: {
            name: 'static/media/[name].[hash:8].[ext]',
          },
        },
        // "url" loader works like "file" loader except that it embeds assets
        // smaller than specified limit in bytes as data URLs to avoid requests.
        // A missing `test` is equivalent to a match.
        {
          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
          loader: require.resolve('url-loader'),
          options: {
            limit: 10000,
            name: 'static/media/[name].[hash:8].[ext]',
          },
        },
        // Process JS with Babel.
        {
          test: /\.(js|jsx)$/,
          include: paths.appSrc,
          loader: require.resolve('babel-loader'),
          options: {
  
            // This is a feature of `babel-loader` for webpack (not Babel itself).
            // It enables caching results in ./node_modules/.cache/babel-loader/
            // directory for faster rebuilds.
            cacheDirectory: true,
          },
        },
        // ** STOP ** Are you adding a new loader?
        // Remember to add the new extension(s) to the "file" loader exclusion list.
      ],
    },
    plugins: [
      // Makes some environment variables available to the JS code, for example:
      // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
      new webpack.DefinePlugin(env.stringified),
      // Moment.js is an extremely popular library that bundles large locale files
      // by default due to how Webpack interprets its code. This is a practical
      // solution that requires the user to opt into importing specific locales.
      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
      // You can remove this if you don't use Moment.js:
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ],
  };
  </code></pre>
  
  <p>webpack.config.client.dev.js</p>
  
  <pre><code>'use strict';
  
  const autoprefixer = require('autoprefixer');
  const path = require('path');
  const webpack = require('webpack');
  const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
  const paths = require('./paths');
  const getClientEnvironment = require('./env');
  const WebpackNotifierPlugin = require('webpack-notifier');
  
  const base = require('./webpack.config.base');
  
  const config = Object.assign({}, base)
  
  config.entry = [
      // Include an alternative client for WebpackDevServer. A client's job is to
      // connect to WebpackDevServer by a socket and get notified about changes.
      // When you save a file, the client will either apply hot updates (in case
      // of CSS changes), or refresh the page (in case of JS changes). When you
      // make a syntax error, this client will display a syntax error overlay.
      // Note: instead of the default WebpackDevServer client, we use a custom one
      // to bring better experience for Create React App users. You can replace
      // the line below with these two lines if you prefer the stock client:
      // require.resolve('webpack-dev-server/client') + '?/',
      // require.resolve('webpack/hot/dev-server'),
      require.resolve('react-dev-utils/webpackHotDevClient'),
      // We ship a few polyfills by default:
      require.resolve('./polyfills'),
      // Errors should be considered fatal in development
      require.resolve('react-error-overlay'),
      // Finally, this is your app's code:
      paths.appIndexJs,
      // We include the app code last so that if there is a runtime error during
      // initialization, it doesn't blow up the WebpackDevServer client, and
      // changing JS code would still trigger a refresh.
  ]
  
  config.output = {
      // Next line is not used in dev but WebpackDevServer crashes without it:
      path: paths.appBuild,
      // Add /* filename */ comments to generated require()s in the output.
      pathinfo: true,
      // This does not produce a real file. It's just the virtual path that is
      // served by WebpackDevServer in development. This is the JS bundle
      // containing code from all our entry points, and the Webpack runtime.
      filename: 'static/js/bundle.js',
      // There are also additional JS chunk files if you use code splitting.
      chunkFilename: 'static/js/[name].chunk.js',
      // This is the URL that app is served from. We use "/" in development.
      publicPath: '/',
      hotUpdateChunkFilename: 'static/[id].[hash].hot-update.js',
      hotUpdateMainFilename: 'static/[hash].hot-update.json',
      // Point sourcemap entries to original disk location
      devtoolModuleFilenameTemplate: info =&gt;
          path.resolve(info.absoluteResourcePath),
  }
  
  config.module.rules = config.module.rules.concat([
      // "postcss" loader applies autoprefixer to our CSS.
      // "css" loader resolves paths in CSS and adds assets as dependencies.
      // "style" loader turns CSS into JS modules that inject &lt;style&gt; tags.
      // In production, we use a plugin to extract that CSS to a file, but
      // in development "style" loader enables hot editing of CSS.
      {
          test: /\.css$/,
          include: paths.appSrc,
          use: [
              {
                  loader: "style-loader" // creates style nodes from JS strings
              }, {
                  loader: "css-loader", // translates CSS into CommonJS
                  options: {
                      importLoaders: 1
                  }
              }
          ]
      },
  ])
  
  config.plugins = config.plugins.concat([
      // This is necessary to emit hot updates (currently CSS only):
      new webpack.HotModuleReplacementPlugin(),
      // Watcher doesn't work well if you mistype casing in a path so we use
      // a plugin that prints an error when you attempt to do this.
      // See https://github.com/facebookincubator/create-react-app/issues/240
      new CaseSensitivePathsPlugin(),
      // If you require a missing module and then `npm install` it, you still have
      // to restart the development server for Webpack to discover it. This plugin
      // makes the discovery automatic so you don't have to restart.
      // See https://github.com/facebookincubator/create-react-app/issues/186
      new WatchMissingNodeModulesPlugin(paths.appNodeModules),
  
      new WebpackNotifierPlugin({
          title: 'Webpack',
          excludeWarnings: true,
          alwaysNotify: true,
          contentImage: path.join(__dirname, '../ahamo-logo.png')
      }),
  
      new webpack.LoaderOptionsPlugin({
          debug: true
      }),
  ])
  
  // Turn off performance hints during development because we don't do any
  // splitting or minification in interest of speed. These warnings become
  // cumbersome.
  config.performance = {
      hints: false,
  }
  
  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  config.node = {
      fs: 'empty',
      net: 'empty',
      tls: 'empty',
  },
  
  module.exports = config
  </code></pre>
  
  <p>webpack.config.server.js</p>
  
  <pre><code>'use strict';
  
  const path = require('path');
  const webpack = require('webpack');
  const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
  const paths = require('./paths');
  const nodeExternals = require('webpack-node-externals');
  const getClientEnvironment = require('./env');
  const base = require('./webpack.config.base');
  const publicUrl = '';
  // Get environment variables to inject into our app.
  const env = getClientEnvironment(publicUrl);
  
  const config = Object.assign({}, base)
  
  config.target = 'node'
  config.entry = paths.serverIndexJs
  config.externals = [nodeExternals()] // / in order to ignore all modules in node_modules folder
  config.output = {
    path: paths.serverBuild,
    filename: 'bundle.js',
    publicPath: '/'
  }
  
  config.module.rules = config.module.rules.concat([
    // "postcss" loader applies autoprefixer to our CSS.
    // "css" loader resolves paths in CSS and adds assets as dependencies.
    // "style" loader turns CSS into JS modules that inject &lt;style&gt; tags.
    // In production, we use a plugin to extract that CSS to a file, but
    // in development "style" loader enables hot editing of CSS.
    {
      test: /\.css$/,
      include: paths.appSrc,
      use: [
        {
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader", // translates CSS into CommonJS
          options: {
            importLoaders: 1
          }
        }
      ]
    },
  ])
  
  config.plugins = config.plugins.concat([
    // Makes some environment variables available to the JS code, for example:
    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
    new webpack.DefinePlugin(env.stringified),
  ])
  
  config.node = {
    console: false,
    global: false,
    process: false,
    Buffer: false,
    __filename: false,
    __dirname: false,
    setImmediate: false,
  }
  
  module.exports = config
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "universal-create-react-app",
    "version": "0.1.0",
    "scripts": {
      "serve": "NODE_ENV=production node ./build/server/bundle.js",
      "start": "node scripts/start.js",
      "nodemon": "nodemon --watch build/server build/server/bundle.js build/server/bundle.js",
      "build-client": "node scripts/build-client.js",
      "build-server": "node scripts/build-server.js",
      "build": "npm run build-client &amp;&amp; npm run build-server",
      "test": "node scripts/test.js --env=jsdom"
    },
    "author": "Campbell Stephenson: Ahamo Digital - Ahamo Pty Ltd",
    "license": "SEE LICENSE IN copyright.txt",
    "dependencies": {
      "@fortawesome/fontawesome": "^1.1.3",
      "@fortawesome/fontawesome-free-brands": "^5.0.6",
      "@fortawesome/fontawesome-pro-light": "^5.0.6",
      "@fortawesome/fontawesome-pro-regular": "^5.0.6",
      "@fortawesome/fontawesome-pro-solid": "^5.0.6",
      "@fortawesome/react-fontawesome": "0.0.17",
      "axios": "^0.16.2",
      "express": "^4.15.3",
      "express-http-proxy": "1.0.6",
      "i": "^0.3.6",
      "npm": "^5.6.0",
      "postcss-cssnext": "^3.1.0",
      "prop-types": "^15.5.10",
      "react": "^16.2.0",
      "react-context-component": "^0.0.3",
      "react-dom": "^16.2.0",
      "react-redux": "^5.0.6",
      "react-router-config": "^1.0.0-beta.4",
      "react-router-dom": "^4.1.1",
      "react-ssr-critical-styles": "^0.1.2",
      "reactstrap": "^5.0.0-beta",
      "redux": "3.7.2",
      "redux-thunk": "2.2.0",
      "serialize-javascript": "1.4.0"
    },
    "devDependencies": {
      "autoprefixer": "7.1.0",
      "babel-cli": "^6.24.1",
      "babel-core": "6.24.1",
      "babel-eslint": "7.2.3",
      "babel-jest": "20.0.3",
      "babel-loader": "^7.1.2",
      "babel-preset-react-app": "^3.0.0",
      "babel-runtime": "6.23.0",
      "case-sensitive-paths-webpack-plugin": "1.1.4",
      "chalk": "1.1.3",
      "concurrently": "^3.4.0",
      "cross-env": "^5.0.0",
      "css-loader": "^0.28.9",
      "dotenv": "4.0.0",
      "eslint": "3.19.0",
      "eslint-config-react-app": "^1.0.4",
      "eslint-loader": "1.7.1",
      "eslint-plugin-flowtype": "2.33.0",
      "eslint-plugin-import": "2.2.0",
      "eslint-plugin-jsx-a11y": "5.0.3",
      "eslint-plugin-react": "7.0.1",
      "extract-text-webpack-plugin": "^3.0.2",
      "file-loader": "0.11.1",
      "fs-extra": "3.0.1",
      "html-webpack-plugin": "^2.30.1",
      "http-proxy-middleware": "^0.17.4",
      "isomorphic-fetch": "^2.2.1",
      "isomorphic-style-loader": "^4.0.0",
      "jest": "20.0.3",
      "node-style-loader": "0.0.1-alpha",
      "nodemon": "^1.11.0",
      "object-assign": "4.1.1",
      "postcss-flexbugs-fixes": "3.0.0",
      "postcss-loader": "2.0.5",
      "promise": "7.1.1",
      "react-dev-utils": "^3.0.0",
      "react-error-overlay": "^1.0.7",
      "style-loader": "^0.20.1",
      "sw-precache-webpack-plugin": "^0.11.4",
      "url-loader": "0.5.8",
      "webpack": "^3.5.6",
      "webpack-dev-server": "^2.8.2",
      "webpack-manifest-plugin": "1.1.0",
      "webpack-node-externals": "^1.6.0",
      "webpack-notifier": "^1.5.1",
      "whatwg-fetch": "2.0.3"
    },
    "jest": {
      "collectCoverageFrom": [
        "src/**/*.{js,jsx}"
      ],
      "setupFiles": [
        "&lt;rootDir&gt;/config/polyfills.js"
      ],
      "testMatch": [
        "&lt;rootDir&gt;/src/**/__tests__/**/*.js?(x)",
        "&lt;rootDir&gt;/src/**/?(*.)(spec|test).js?(x)"
      ],
      "testEnvironment": "node",
      "testURL": "http://localhost",
      "transform": {
        "^.+\\.(js|jsx)$": "&lt;rootDir&gt;/node_modules/babel-jest",
        "^.+\\.css$": "&lt;rootDir&gt;/config/jest/cssTransform.js",
        "^(?!.*\\.(js|jsx|css|json)$)": "&lt;rootDir&gt;/config/jest/fileTransform.js"
      },
      "transformIgnorePatterns": [
        "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
      ],
      "moduleNameMapper": {
        "^react-native$": "react-native-web"
      }
    },
    "babel": {
      "presets": [
        "react-app"
      ]
    },
    "eslintConfig": {
      "extends": "react-app"
    }
  }
  </code></pre>