Arc ssr (server side) CSS can not loaded.

[wesias7]

I always use it well. Thank you. (ARC ssr)
When using "react-calendar" there is a conflict with "node_modules/react-calendar/dist/entry.js".

Probably.
There seems to be a problem with the "server webpack config".

The way "issue" in 2017 is correctly invoked in "Client Config" and is correctly invoked through "Css-loader," but is before "Styled-Component".

`

arc@0.1.0 start C:\Users\test\Desktop\projects\test\admin
node .

C:\Users\test\Desktop\projects\test\admin\node_modules\react-calendar\dist\Calendar.css:1
(function (exports, require, module, __filename, __dirname) { .react-calendar {
^

SyntaxError: Unexpected token .
at new Script (vm.js:51:7)
at createScript (vm.js:136:10)
at Object.runInThisContext (vm.js:197:10)
at Module._compile (module.js:613:28)
at Object.Module._extensions..js (module.js:660:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:501:12)
at Function.Module._load (module.js:493:3)
at Module.require (module.js:593:17)
at require (internal/module.js:11:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! arc@0.1.0 start: node .
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the arc@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
`

Other people seem to be having problems, and I wonder if there is no way to solve them at all.

I've tried to figure out a number of ways, but eventually, I think I'll need a manual on how to add it to "Asset.json."

Isn't there anyone nice who solved it in a different way?

[wesias7]

Dear friends who were worried like me,
Let me use the feedback I've been looking for in three days.

I tried to use "react-calendar" for "redux-ssr." By the way, there is an error in the "Server Webpack" setting.

First

npm -g install webpack@3.10.0 webpack-dev-server@2.3.0

I reinstalled "webpack env".

lastly
Added through

npm install --save-dev null-loader style-loader@0.18.1 css-loader@0.28.3

I modified the file "webpack.config.js". then

const base = pos => group([
setOutput({
filename: '[name].js',
path: outputPath,
publicPath,
}),
defineConstants({
'process.env.NODE_ENV': process.env.NODE_ENV,
'process.env.PUBLIC_PATH': publicPath.replace(//$/, ''),
}),
addPlugins([
new webpack.ProgressPlugin(),
]),
happypack([
babel(),
]),
assets(pos),
resolveModules(sourceDir),

env('development', [
setOutput({
publicPath: devDomain,
}),
]),
])

const server = createConfig([
base('server'),
entryPoint({ server: serverEntryPath }),
setOutput({
filename: '../[name].js',
libraryTarget: 'commonjs2',
}),
addPlugins([
new webpack.BannerPlugin({
banner: 'global.assets = require("./assets.json");',
raw: true,
}),
]),
() => ({
target: 'node',
externals: [nodeExternals()],
stats: 'errors-only',
}),

env('development', [
serverSourceMap(),
addPlugins([
new SpawnPlugin('npm', ['start']),
]),
() => ({
watch: true,
}),
]),

])

const client = createConfig([
base('client'),
entryPoint({ client: clientEntryPath }),
addPlugins([
new AssetsByTypePlugin({ path: assetsPath }),
new ChildConfigPlugin(server),
]),

env('development', [
devServer({
contentBase: 'public',
stats: 'errors-only',
historyApiFallback: { index: publicPath },
headers: { 'Access-Control-Allow-Origin': '*' },
host,
port,
}),
sourceMaps(),
addPlugins([
new webpack.NamedModulesPlugin(),
]),
]),

env('production', [
splitVendor(),
addPlugins([
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
]),
]),

])`

If you look at it, you've added an instrument called "pos." Separate this server or client.
We added the "base function ['server or client']" and it is forwarded to an asset().

In addition, there are a few other problems.

1. Redux-ssr had a "module.loaders" problem in "webpack 1.x" and was not running on "webpack 3.11.0".

I think we'll need to rewrite the version of "wepback-block" that changes to "module.rules."

2. This issue is caused by the addition of a source from "React-Calendar" to a package that calls "Calendar.cs.
   If you are writing Redux-SSR, you must convert and write within the Src/components/atom folder.

for example
Create the file "src/components/atom/Calendar/index.js."

import React from 'react'
import styled, { css } from 'styled-components
import { isServer } from 'config'
const styles = css`
 **Here, the code copies "react-calendar css."**
`
const Wrapper = styled.div`${styles}`

const Calendar = ({ ...props }) => {
    const ReactCalendar = **isServer** ? styled.div`` : **require('react-calendar').default**
    return (
        <Wrapper>
            <ReactCalendar
                {...props}
                />
        </Wrapper>
    )
}
export default Calendar

I used it this way.
I hope it will help my friends who are suffering all day long.