React.js : comment résoudre l'erreur Attempted import error: 'combineReducers' ?

Depuis la norme ES6, le langage JavaScript possède de nouvelles directives permettant de créer des modules. Des modules sont des codes que l'on peut exporter puis importer dans une autre application pour les utiliser quand on en a besoin. Les frameworks JavaScript, comme ReactJS ou bien Vue.js, l'utilisent pour séparer leurs outils et éviter que l'on importe tout le code du framework alors que l'on n’a besoin que d'une partie. Pour cela, plusieurs possibilités d'import et export ont été conçues. C'est la confusion entre les types qui aboutit au message "Attempted import error".

Il est possible d'exporter le code de 2 manières dans le langage JavaScript. Le premier est l'export par défaut. Il consiste à exporter l'ensemble de son module avec une seule directive export située en bas du fichier. On peut ensuite importer le code avec une directive "import". On donne ensuite le nom que l'on souhaite au module importé. L'avantage, c'est que l'on peut donner le nom que l'on souhaite au module, cela évite ainsi des conflits potentiels entre 2 modules qui utiliseraient les mêmes noms. L'inconvénient est qu'il faut exporter tout le fichier, on ne peut faire qu'un seul export par fichier.

//Export par défaut
const monModule = () => { 
  return Hello word;
}

export default monModule;

import toto from "./monModule";

Le deuxième type d'export est l'export nommé. Il permet d'utiliser plusieurs directives d'exports par fichier. Vous pouvez ensuite les importer en précisant entre des accolades le nom des composants avec la directive "import". Cela apporte davantage de flexibilité à un module. L'inconvénient est que l'on ne peut pas changer le nom des composants. Vous devez donc faire attention aux éventuels conflits qui pourraient se produire si deux modules utilisent le même nom.

//Export nommé
export cont monModule = () => { 
  return Hello word;
}

import { monModule } from "./monModule";

Si vous voyez le message d'erreur " Attempted import error" suivi du nom d'un module, c'est que vous avez utilisé le mauvais type d'import pour le module. Vous devez modifier votre directive "import" pour utiliser l'autre type d'import.

JavaScript