Arc ssr (server side) CSS can not loaded.

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?

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.

diegohaz / arc

Arc ssr (server side) CSS can not loaded. #350