Errors with IE10 and Babel 6

[ifunk]

Trying to get react-forms working with IE10, but am getting the following error:

Fieldset.getChildContext(): childContextTypes must be defined in order to use getChildContext().

So I added the following before using Fieldset:

Fieldset.childContextTypes = { formValue: PropTypes.object }

And the above error went away, but I got a new one:

A form component <Field /> should receive form value via props or be used as a part of element hierarchy which provides form value via context.

I tried a few other things without success, so I am wondering if you've experienced this issue before and know of a solution. The original code works as expected in IE11 (and all other browsers I've tested).

I'm guessing it's probably a Babel 6 bug or known incompatibility. I've tried a few different options with Babel transforms, but nothing solved the problem.

Any ideas?

[ifunk]

A bit more investigation has shown the problem to be caused by uninheritable static properties on IE10 and below with Babel which can be fixed by adding the transform-proto-to-assign babel plugin when building react-forms. I tested it on the examples included with react-forms and it works.

[ifunk]

This is also an issue with react-stylesheet.

For the moment I am including my own pre-built modules for react-stylesheet and react-forms in my project, so it's no longer affecting me, however it might be beneficial to apply this fix in your build files.

[elmorenocivitas]

@ifunk can you provide some details about that pre-built you're mentioning on your last comment. Trying to figure out how to rebuild react-forms passing it through that plugin on my bundling process.

[ifunk]

@elmorenocivitas The repo has changed since I built mine, but if you clone react-forms repo then install and add the mentioned babel plugin to the "babel" config in package.json, then run make build, you can copy the files from lib/ and use them in your project.

In my project I set up an alias in webpack so I could still use import { createValue } from 'react-forms' in my sourcecode.

resolve: {
  alias: {
    // IE10-compatible builds for react-forms and react-stylesheet
    'react-forms': path.join(__dirname, 'lib', 'ie-compat', 'react-forms-2.0.0-beta16.js'),
    'react-stylesheet': path.join(__dirname, 'lib', 'ie-compat', 'react-stylesheet-1.0.0-beta.3'),
  }
},

[leomoreno]

Thanks for the answer @ifunk. Our build npm install RF and then bundle it together with our code. When npm installed the src is not present so I can't pass it through the babel plugins. 😢

[adamroyle]

@leomoreno Same as us, which is why I build it manually and then copy the files into our project.

[elmorenocivitas]

No room for manual builds here. I need a different approach I guess. The whole dependency install and bundling process needs to be automated.