jeudi 15 novembre 2018

Using React js inside an Ember project and importing a library using import from 'npm:

I've seen many other posts with a similar issue but I couldn't find any valid solution to my case.

A bit of background:

I'm working inside an Ember application, where React is being used to develop new components (we are replacing the old ember code, using React).

So far everything works fine and we are able to create and use React components inside Ember without any issues.

Problem:

One of the React component I'm writing needs to use a range date picker and I've found several utilities that do that. I've deleted all the unnecessary code from the component:

import React from 'npm:react';
import DayPickerInput from 'npm:react-day-picker/DayPickerInput';

export default class ContractDetails extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <DayPickerInput/>
      </div>
    );
  }
}

Every time I try to render it I get the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

Reading the other posts, I tried to replace:

import DayPickerInput from 'npm:react-day-picker/DayPickerInput';

With:

import {DayPickerInput} from 'npm:react-day-picker/DayPickerInput';

But I get a similar result (note the error now says it's getting an undefined rather than an object):

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `ContractDetails`.

The only thing that prevent the error to appear is to use:

<DayPickerInput.default/>

Which, however, causes issue with the library css.

I've tried to replace this library with many others but I always get the same error, so I'm excluding an error within the library itself.

Do you have any clues why I'm getting this error?

I'm using the latest react version (16.6.3)




Aucun commentaire:

Enregistrer un commentaire