Syntax Error while using ReactDOMServer with Sass

Question

Im getting Syntax Error like below while using ReactDOMServer and Sass in my project:

SyntaxError: /Users/ceyhun23/Sites/{project_name}/lib/components/common/Menu/Menu.scss: Unexpected character '#' (1:3) 0|server | > 1 | img#logo{ 0|server | | ^ 0|server | 2 | height: 100%; 0|server | 3 | }

webpack.config.js:

const path = require('path');

const config = {
  resolve: {
    alias: {
      Assets: path.resolve(__dirname, 'lib/assets/'),
    }
  },
  entry: ['babel-polyfill', './lib/components/App.js'],
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.(png|jpg)$/i,
        exclude: /node_modules/,
        loader: 'url-loader',
        include: path.resolve(__dirname, 'lib/assets/images')
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

module.exports = config;

This is my server scripts with ExpressJs

import React from 'react';
import ReactDOMServer from 'react-dom/server';

import App from './components/App';

const serverRender = () => {
  return ReactDOMServer.renderToString(
    <App />
  );
};

export default serverRender;

Menu component is child component of App component, and Menu.scss imported like below:

import React from 'react';

import './Menu.scss';

export default class Menu extends React.Component {
  render() {...}
}

and Finally Menu.scss :

img#logo{
  height: 100%;
}

Do you have any suggestion? Could you tell me please, whats wrong with my source ?

Thanks!

@ReiDien, do you have any suggestion ? with these sources and using webpack I can achive running client-side React Application with no error — Jeyhun Ashurbayov, Mar 02 '18 at 12:32
@ReiDien Im using webpack, I did edit my question post and added its configuration — Jeyhun Ashurbayov, Mar 02 '18 at 12:44

score 0 · Accepted Answer · answered Mar 04 '18 at 21:16

After long investigation I found 2 type of solution for this issue thanks to dimaip! So , Im giving related links below you can check if you have this problem like me:

1) 1st is adding env variable to check in webpack for importing css or not, and using .css file seperated from bundle.js For this solution you can check this link

2) 2nd solution is using webpack for server-side renderToString function and using it inside app.get('*') Additionaly, you can check this link

Thanks!!!

Syntax Error while using ReactDOMServer with Sass

1 Answers1