2

I am currently facing and issue that is driving me crazy. I am progressively migrating a legacy webapp to React (v16.4.1).

It is working in Chrome, Firefox, Opera, and IE above 11 but for IE9 and IE10 doesn't work. Here is the code (I have done a basic example before going into the real implementation of the code).

App.js

import * as React from "react";
import * as ReactDOM from "react-dom";

import DatePickerComponent from "./components/DatePickerComponent";

window.datePicker = function (dom) {
  ReactDOM.render(<DatePickerComponent aa="aa"/>, dom);
};

Datepicker.js

import React from "react";

export default class DatePickerComponent extends React.Component {

  handleClick = (event) => {
    //eslint-disable
    console.log(event);
  }

  render() {
    return <a href="#" onClick={this.handleClick}>Hola</a>;
  }
}

Profile.js

  window.datePicker(document.getElementById("assetGainFromId"));

profile.jsp

<asset:include-js src="/res/js/polyfill/polyfills.min.js" bundle="preload"/>
<asset:include-js src="/res/js/jquery.js" bundle="global"/>
        <asset:include-js src="webjar:umd/react.production.min.js" devSrc="webjar:umd/react.development.js" bundle="global"/>
        <asset:include-js src="webjar:umd/react-dom.production.min.js" devSrc="webjar:umd/react-dom.development.js" bundle="global"/>
<asset:include-js src="/resources/js/app.min.js" bundle="global"/>
<asset:include-js src="/res/js/profile/profile.js" bundle="global"/>

The error that I am getting is the following:

Warning: The component appears to have a render method, but doesn't extend React.Component. This is likely to cause errors. Change Unknown to extend React.Component instead. Exception thrown and not caught File: react-dom.development.js, Line: 17121, Column: 5 The above error occurred in one of your React components: in Unknown Consider adding an error boundary to your tree to customize error handling behavior. Visit react-error-boundaries to learn more about error boundaries.

cfnerd
  • 3,658
  • 12
  • 32
  • 44
Maria BC
  • 21
  • 2
  • The required polyfills include polyfills for `Map`, `Set` and `requestAnimationFrame`. Make sure these are included and report if the problem still persists. Also see [Javascript Environment Requirements](https://reactjs.org/blog/2017/09/26/react-v16.0.html#javascript-environment-requirements) in the docs. – trixn Jul 20 '18 at 14:19
  • Fixed, was a problem with preset-babel version (from 1.1.0 to 1.2.0) – Maria BC Jul 20 '18 at 14:45
  • Consider providing additional details in how you solved the problem and why the `preset-babel` version was causing the problem. As it stands, this answer is not likely to help future visitors. – War10ck Jul 20 '18 at 14:46
  • @War10ck You're right. I'm a future visitor and this didn't help me at all. – glln Feb 04 '20 at 17:05

0 Answers0