TypeError when using ui-harness with TypeScript and Radium

[Dilatorily]

When I decorate my component with Radium in TypeScript, I get an empty browser with this message in the console.

bluebird.js?e366:1482 Unhandled rejection TypeError: Class constructor Component cannot be invoked without 'new'
    at Object.mountComponent (eval at <anonymous> (http://localhost:3030/js/vendor.js:876:2), <anonymous>:46:35)
    at Object.mountComponent (eval at <anonymous> (http://localhost:3030/js/vendor.js:876:2), <anonymous>:46:35)
    at Object.mountComponent (eval at <anonymous> (http://localhost:3030/js/vendor.js:876:2), <anonymous>:46:35)
    at Object.mountComponent (eval at <anonymous> (http://localhost:3030/js/vendor.js:876:2), <anonymous>:46:35)
From previous event:
    at init (eval at <anonymous> (http://localhost:3030/js/vendor.js:3216:2), <anonymous>:39:39)

I made a repository to reproduce this error here: Dilatorily/ui-harness-issue@8d834db84c0dbae4990e42b5022b8cb57ef438e8

When I remove the decorator, ui-harness renders as expected.
https://github.com/Dilatorily/ui-harness-issue/blob/master/src/components/Component.tsx#L40

[frederickfogerty]

Sorry you weren't able to get it working with Typescript.

Seems to be related to FormidableLabs/radium#443, which is also related to lodash/lodash#1193 and tvcutsem/harmony-reflect#55.

Since Typescript supports decorators... do you reckon you could try a decorator and see if that works? I know you should be able to use the HOF (and we should fix this), but just to get it working, maybe try that first?

[frederickfogerty]

Okay, so it works when using Radium in the ui-harness examples (pushed a branch at https://github.com/philcockfield/ui-harness/tree/radium-typescript).

It must be something to do with importing the ui-harness into another project, maybe something to do with babel not transforming. Maybe it has something to do with a .babelrc not being present at the root directory...

[philcockfield]

@Dilatorily - can you give an example of how you're decorating your components. We haven't been using the @decorators yet, as they're not a formal part of the spec yet. I wonder if that's what's causing issues.

Can you paste in an example decorated component please?

[frederickfogerty]

@philcockfield I think he means using the higher order function as a "decorator"

Aside: I wonder how many mentions @decorators gets... 😂

[Dilatorily]

@philcockfield Sorry about the "decorator", @frederickfogerty is right. I meant the higher order function.

On the other hand, I tried using the decorator @Radium, and I get the same results.

Turns out, I needed to add a .babelrc file with both babel-plugin-transform-es2015-classes and babel-preset-react to have it working. I think it is worth mentioning it in the docs!

[faisalil]

what do you guys think the long term solution for this is?

[frederickfogerty]

We need to handle the babel config better than we are right now, I've got some ideas in #97, which is essentially the same problem as this

[Kikketer]

So I already have a working app and am not using babel-plugin-transform-es2015-classes anywhere in my application. I'd rather not have that application add that additional tranformation (and debug the leagues of issues that arise from making that change).
Does anyone have an example of how to fix this issue just for the tests? I've attempted to start using a separate file like radiumTransform.js with the following:

const classTransform = require('babel-plugin-transform-es2015-classes')
const babelJest = require('babel-jest')

module.exports = {
  process(src, filename, config, options) {
    return classTransform(src)
  }
}

With my package.json that looks like this:

  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.js?(x)",
      "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.jsx?$": "<rootDir>/config/jest/radiumTransform.js",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
    ],
    "globals": {
      "window": {
        "location": {
          "host": "localhost"
        }
      }
    }
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },

If I simply add the es2015-classes plugin into the babel config, it causes piles of issues with the currently running and dependable application.
Does anyone have any suggestions for my radiumTransform.js file?