Glamorous not working with CJS modules

[mjashanks]

• glamorous version: 4.11.6
• glamor version: 2.20.40
• react version: 16.2.0

Relevant code.

const glamorous = require("glamorous");

const ContainerDiv = glamorous.Div({
    display: "block"
});

What you did: I am trying to use glamorous, using CJS modules & running from node.

I am currently needing to use CJS, as I am writing an application using Electronjs, and Javascript. In order to use native node modules (e.g. "fs", i need to use require("fs") )

What happened:

An exception was thrown:

TypeError: Cannot call a class as a function at classCallCheck C:\code\personal\js_sandbox\node_modules\glamorous\dist\glamorous.cjs.js:353:11) at Function.ThemedComponent [as Div (C:\code\personal\js_sandbox\node_modules\glamorous\dist\glamorous.cjs.js:503:7)

Reproduction:

https://codesandbox.io/s/pm2ww85nnj

I attempted to fork, and repro in a test, but could not npm run validate ... have made a comment on that in #352

[luke-john]

Hey @mjashanks, thanks for reporting the issue.

The error you are seeing there is because you're using the glamorous dom component (glamorous.Div) rather than the glamorous dom component factory (glamorous.div).

Glamorous dom components

const reactNode = (<glamorous.Div color="red">hello</glamorous.Div>)

Glamorous dom component factories

const GlamorousComponent = glamorous.div({color: 'red'})
const reactNode = (<GlamorousComponent color="red">hello</GlamorousComponent>)

These are detailed further in the core concepts section of the glamorous documentation website https://glamorous.rocks/basics#core-concepts.

I've reworked your sandbox to use a dom component factory at the following link.

https://codesandbox.io/s/03n4z8w570

[mjashanks]

Thank you very much @luke-john - i feel silly :)