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!
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!!!