seo Question posted in
Some basic information to get you started with this can be found here.

Create React App Server Side Rendering SCSS Webpack Error – SEO

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"
  }
Tags:

2

Answers


  1. 0

    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']
    })
}
    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search