Issue with SASS (?) after migration from alpha to beta.3

[konradzuwala]

Hello again! We recently migrated our ROC environment from alpha to beta.3. After changing config file we encountered issue with sass. We use react calendar component: https://github.com/namespace-ee/react-calendar-timeline. It worked totally fine with alpha, but when we migrated to beta.3 we have following problem:

ℹ Roc runtime has been initialized.
webpack built 4778d900906e18e0e544 in 7398ms

/Users/konrad/XYZ/node_modules/react-calendar-timeline/modules/lib/Timeline.scss:1
(function (exports, require, module, __filename, __dirname) { $item-color: white;
                                                                         ^
SyntaxError: Unexpected token :
    at Object.exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/konrad/XYZ/node_modules/react-calendar-timeline/modules/lib/Timeline.js:19:1)
    at Module._compile (module.js:541:32)

The file, Timeline.scss looks ok:

$item-color: white;
$item-background: #2196F3;
$item-border: 1px solid #1A6FB3;
$item-selected-color: white;
$item-selected-background: #FFC107;
$item-selected-border: 1px solid #FF9800;

$row-background-even: transparent;
$row-background-odd: rgba(0,0,0,0.05);

$border-color: #bbb;
$border-width: 1px;
$thick-border-width: 2px;
$sidebar-color: #ffffff;
$sidebar-background-color: #c52020;
$header-color: #ffffff;
$header-background-color: #c52020;
$lower-header-color: #333333;
$lower-header-background-color: #f0f0f0;
$list-item-padding: 0 4px;
$weekend: rgba(250, 246, 225, 0.5);

.react-calendar-timeline { 
....

My guess is that plugin for SASS has changed and now it doesn't properly validate file. Or is it maybe something else? Thank you again for help!

[wadim]

Just a comment that this error indicates that the SASS file is evaluated as JavaScript so my guess is that it's a problem with webpack loader configuration i.e. the SASS loader does not kick in.

[konradzuwala]

Is it a bug from my side? I mean, in a config file for instance? Or it should go automatically? Edit: Here is my roc.config.js (after migrating it from alpha):

module.exports = {
  settings: {
    runtime: {
      applicationName: 'ABC',
      port: 4200,
      serve: ['public', 'build/client'],
      favicon: 'favicon.png',
      template: {
        path: 'views',
      },
    },
    build: {
      reducers: 'app/redux/reducers.js',
      redux: { 
        middlewares: 'app/redux/middlewares.js'
      },
      routes: 'app/routes/index.js',
      disableProgressbar: true,
    },
    dev: {
      browsersync: {
        options: {
          open: true
        }
      }
    }
  }
};

package.json:

{
  "name": "roc-0",
  "version": "1.0.0",
  "description": "Roc lab 0",
  "author": "XYZ",
  "license": "MIT",
  "scripts": {
    "build": "roc build",
    "dev": "roc dev",
    "start": "roc start",
    "lint": "eslint .",
    "test": "roc test --test-web-src-path tests/",
    "test:watch": "roc test --test-web-src-path tests/ --watch",
    "test:cli": "babel-node ./scripts/browser-free.js",
    "push:stage": "rsync -ar . oc-stage:www/ --exclude node_modules/ --exclude coverage/ --exclude build/ --exclude scripts/ && rsync -ar scripts/ oc-stage:bin/",
    "deploy:stage": "npm run push:stage && ssh oc-stage bin/stage-rebuild-restart"
  },
  "dependencies": {
    "altered.js": "^0.8.6",
    "base-64": "^0.1.0",
    "immutable": "^3.8.1",
    "react-tap-event-plugin": "^1.0.0",
    "roc-package-web-app-react": "^1.0.0-beta.3",
    "roc-plugin-test-mocha-karma-webpack": "^1.0.0-beta.3"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-cli": "^6.7.7",
    "babel-eslint": "6.0.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "chai": "^3.5.0",
    "chai-as-promised": "^5.3.0",
    "chai-immutable": "^1.5.4",
    "enzyme": "^2.3.0",
    "eslint": "2.6.0",
    "eslint-config-airbnb": "6.2.0",
    "eslint-plugin-react": "4.2.3",
    "gulp": "^3.9.1",
    "ignore-styles": "^4.0.0",
    "interact.js": "^1.2.6",
    "isomorphic-fetch" : "^2.2.1",
    "marked": "^0.3.5",
    "moment": "^2.15.1",
    "react-addons-test-utils": "^15.1.0",
    "react-calendar-timeline": "^0.8.6",
    "react-date-picker": "^5.3.28",
    "react-dnd": "^2.1.4",
    "react-dnd-html5-backend": "^2.1.2",
    "react-scroll": "^1.4.0",
    "roc-package-web-app-react-dev": "^1.0.0-beta.3",
    "roc-plugin-style-sass": "^1.0.0-beta.3",
    "trepanjs": "^0.2.5"
  }
}

[wadim]

I see that you are not loading the SCSS file from your code. It's the react-calendar-timeline (source) which does that.

Do you use roc-plugin-style-sass? Did you upgrade that as well?

[dlmr]

I think this might be because we fixed a bug where styles where incorrectly managed on the server side, we processed more things than we should have had which could result in unwanted behaviours.

This module, react-calendar-timeline, assumes that the context that loads it have a way to load stylesheets something that the server/Node does not have by default.

In general it is good to not make assumptions like this in modules but we can work around this in a couple of ways.

The easiest thing to do is to tell Webpack to include the module on the server.

module.exports = {
  project: {
    actions: [{
      hook: 'build-webpack',
      action: () => () => (webpackConfig) => {
        webpackConfig.externals.unshift({
          // This will make Webpack include the module in the server build and process all require:s
          'react-calendar-timeline': false,
        });
        return webpackConfig;
      },
    }],
  },
};

[konradzuwala]

That fixed it, thank you! We also did a fix by making a fork of their git and changing it in their sources, but I like that solution much more :) Thank you!