Create React App Server Side Rendering SCSS Webpack Error

Question

I needed to add the blogs in our web app and to make our app configure for SEO therefore I'm trying to add SSR support in my current create react app. I'm trying react hydrate and react render method. I'm getting following error while building the app.

ERROR in ./src/assets/scss/theme.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/scss/theme.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../../../../fonts/materialdesignicons-webfont.eot?v=5.0.45' in '/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/src/assets/scss'
    at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:209:21
    at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15
    at /home/muhammadwaqastekrowe/dev/tekrowe/speetar-react-frontend/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
    at processTicksAndRejections (internal/process/task_queues.js:75:11)
 @ ./src/assets/scss/theme.scss 2:12-140 9:17-24 13:15-22
 @ ./src/App.js
 @ ./server/index.js

Webpack configuration

 {
   test: /\.s[ac]ss$/i,
   use: [
      // Creates `style` nodes from JS strings
      "style-loader",
      // Translates CSS into CommonJS
      "css-loader",
      // Compiles Sass to CSS
      "sass-loader",
   ],
 }

Dev dependencies

"devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^5.2.2",
    "cssnano": "^5.0.1",
    "node-sass": "^4.14.1",
    "nodemon": "^2.0.4",
    "npm-run-all": "^4.1.5",
    "postcss-loader": "^5.2.0",
    "prettier": "2.2.1",
    "sass": "^1.32.8",
    "sass-loader": "^7.3.1",
    "style-loader": "^2.0.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.12",
    "webpack-node-externals": "^1.7.2"
  }

Answer 1

use file-loader and resolve-url-loader for load font file in scss

{
    test: /\.(woff2?|ttf|otf|eot|svg)$/,
    exclude: /node_modules/,
    loader: 'file-loader',
    options: {
        name: '[path][name].[ext]'
    }
},
{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
         fallback: 'style-loader',
         use: ['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
    })
}

Answer 2

See production build approach for SSR that supports sass in this thread . Note that style-loader is not the preferred method for SSR builds.