HOC import TypeError : Object(...) n'est pas une fonction

Question

Je viens d'essayer d'utiliser un simple HOC avec react. Voici la fonction :

import React from "react"

const withOptions = (WrappedComponent) => {

  return class extends React.Component {

    render() {
      return <WrappedComponent { ...this.props } />
    }
  }

}

export default withOptions

Le problème semble résider dans la manière dont je l'exporte/importe.

Importé et utilisé de manière simple, il fonctionne :

import withOptions from "./Options"
...

class BilanClimatique extends React.Component{
  ...
}
const StyledBilanClimatique = withStyles(styles)(BilanClimatique)
export default withOptions(StyledBilanClimatique)

Mais si j'utilise un fichier intermédiaire comme index.js

import withOptions from "./Options"

export {
  withOptions
}

Et je l'importe dans mon composant comme suit

import {
  withOptions
} from "./index"

Voici ce que j'obtiens

Quelqu'un peut-il m'aider à comprendre ?

EDIT :

J'ai constaté que le composant qui utilise le HOC est importé du même fichier que le HOC :

import withOptions from "./Options"
import BilanClimatique from "./BilanClimatique"

export {
  withOptions,
  BilanClimatique
}

Et c'est cela qui pose problème, mais je ne comprends pas pourquoi... Voici un bac à sable avec le problème https://codesandbox.io/s/r074735yvo

Answer 1

Il semble qu'il s'agisse d'un problème lié à l'hélitreuillage des "exportations". D'après ce que je peux voir, le imports obtenir hissé mais je n'ai rien trouvé de semblable pour exports .

Le flux qui pose problème ( codesetboîte ) :

App.js :

import { BilanClimatique } from "./components/index";

./composants/index.js :

// just using the "re-export" shortcut
export { default as BilanClimatique } from "./BilanClimatique";
export { default as withOptions } from "./Options";

./composants/BilanClimatique.js :

import { withOptions } from "./index";

./composants/Options.js :

const withOptions = WrappedComponent => {
  return ... //snipped code

export default withOptions;

Lorsque App.js demande à index.js le BilanClimatique, ce dernier demande à son tour à l'application même index.js pour withOptions . Mais comme les exportations ne semblent pas être hissées, index.js n'a pas encore rendu withOptions disponible.

Comment résoudre le problème ?

1. Commande de produits d'exportation :

dans ./components/index.js, modifiez l'ordre des exportations en fonction de votre dépendance :

// just using the "re-export" shortcut
export { default as withOptions } from "./Options";
export { default as BilanClimatique } from "./BilanClimatique";

Je ne le recommande pas. Il est très fragile.

2. Utilisez index.js pour n'exposer qu'à l'extérieur de votre espace de noms. À l'intérieur de votre espace de noms, utilisez des importations explicites.

c'est-à-dire dans ./components/BilanClimatique.js :

import withOptions from "./Options";

3. Si vous avez une très grande base de code, utilisez plusieurs index.js pour exporter vos "contrats". Jetez un coup d'œil aux bases de code de divers auteurs de bibliothèques, je pense que c'est la stratégie qu'ils adoptent.

Je recommanderais personnellement le numéro 2 plutôt que le numéro 3, à moins que vous ne rencontriez des problèmes avec le numéro 2.

Answer 2

. ne semble pas être une grande voie d'importation. Essayez d'importer à partir du fichier 'index'.

import {
  Logo,
  withOptions
} from "./index"