import iOSTheme from 'reapp-ui/themes/ios/theme' results in parse error

[jakobdamjensen]

import iOSTheme from 'reapp-ui/themes/ios/theme'
import Theme from 'reapp-ui/helpers/Theme';
import Button from 'reapp-ui/components/Button';
import React from 'react';

export default React.createClass({
  render() {
    return (
      <Theme {...iOSTheme}>
        <Button color="red" />
      </Theme>
    );
  }
});

This example gives the following error =(

Error: Parsing file /Users/jakobdamjensen/Documents/blink/client/node_modules/reapp-ui/assets/styles/ios/base.css: Line 2: Unexpected token *
    at Deps.parseDeps (/Users/jakobdamjensen/Documents/blink/client/node_modules/gulp-browserify/node_modules/browserify/node_modules/module-deps/index.js:339:28)
    at /Users/jakobdamjensen/Documents/blink/client/node_modules/gulp-browserify/node_modules/browserify/node_modules/module-deps/index.js:282:29
    at ConcatStream.<anonymous> (/Users/jakobdamjensen/Documents/blink/client/node_modules/gulp-browserify/node_modules/browserify/node_modules/concat-stream/index.js:36:43)
    at ConcatStream.emit (events.js:117:20)
    at finishMaybe (/Users/jakobdamjensen/Documents/blink/client/node_modules/gulp-browserify/node_modules/readable-stream/lib/_stream_writable.js:460:14)
    at endWritable (/Users/jakobdamjensen/Documents/blink/client/node_modules/gulp-browserify/node_modules/readable-stream/lib/_stream_writable.js:469:3)
    at ConcatStream.Writable.end (/Users/jakobdamjensen/Documents/blink/client/node_modules/gulp-browserify/node_modules/readable-stream/lib/_stream_writable.js:436:5)
    at DuplexWrapper.onend (/Users/jakobdamjensen/Documents/blink/client/node_modules/gulp-browserify/node_modules/readable-stream/lib/_stream_readable.js:537:10)
    at DuplexWrapper.g (events.js:180:16)
    at DuplexWrapper.emit (events.js:117:20)

It seems like it's the iOS theme that's causing this issue..

[jakobdamjensen]

I'm using browserify by the way...

[jakobdamjensen]

I've tried installing cssify but it didn't change anything

[jakobdamjensen]

so I guess it's because the node_modules isn't transpiled by browserify making this related to #46....

I'm just guessing here.

[jakobdamjensen]

So I've added

{
  "browserify": {
    "transform": ["babelify", "cssify"]
  }
}

to the package.json file and now it can run browserify. But now it fails at runtime do to the makeStyles dynamic require in the ios styles.js file. So My approach must be totally wrong.. Don't know what to do =)

[schankam]

Hi there,

have you found a solution to your issue ? I am facing the same problem here, quite annoying..

[jakobdamjensen]

@schankam nope - didn't find any solution. Hope you will

[yornaath]

I am having the same problem when requiering this package from node_modules even though it is now transpiled before published to npm.

[hellogerard]

I don't know about browserify, but this webpack can take care of this error by using the css-loader/style-loader webpack loaders. If you npm install those two modules, you can have a webpack.config.js like:

module.exports = {
  entry: './entry',
  module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" },
      ...
    ]
  }
};

And it will parse that require(...base.css) line fine.