web-dev-qa-db-fra.com

TypeError: __webpack_require __. I (...) n'est pas une fonction

J'obtiens un Webpack TypeError lorsque j'essaie de simplifier une importation. Le code suivant fonctionne sans aucun problème. Ici, j'importe un React Higher-Order-Component (HOC) appelé smartForm de core/components/form/index.js.

core/components/form/index.js (fait une exportation nommée de smartForm)

export smartForm from './smart-form';

login-form.jsx (importe et utilise smartForm)

import { smartForm } from 'core/components/form';
class LoginForm extends React.Component {
    ...
}
export default smartForm(LoginForm);

Cependant, je veux simplifier l'importation à seulement import { smartForm } from 'core'. J'ai donc réexporté smart-form Dans core/index.js Et l'ai importé de core. Voir le code ci-dessous:

core/index.js (effectue une exportation nommée de smartForm)

export { smartForm } from './components/form';
// export smartForm from './components/form';  <--- Also tried this

login-form.jsx (importe et utilise smartForm)

import { smartForm } from 'core';
class LoginForm extends React.Component {
    ...
}
export default smartForm(LoginForm); // <--- Runtime exception here

Ce code se compile sans aucun problème, mais j'obtiens l'exception d'exécution suivante sur la ligne export default smartForm(LoginForm);:

login-form.jsx: 83 TypeError non capturé: webpack_require. i (...) n'est pas une fonction (…)

Qu'est-ce que je rate?

P.S. Voici les versions Bable et plugin que j'utilise:

"babel-core": "^6.18.2",
"babel-preset-es2015-webpack": "^6.4.3",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-1": "^6.16.0",
reactjswebpackecmascript-6babeljses6-module-loader
13
Naresh

tl; dr

  • Pour le questionneur: Ajoutez ceci à votre webpack.config.js:

    resolve: {
  alias: {
    core: path.join(__dirname, 'core'),
  },
},

  • Pour le grand public: assurez-vous que la chose que vous essayez d'importer existe bien dans ce package.

Explication

Problème du questionneur: importation de son propre code comme les modules npm

Vous essayez d'importer les exportations de votre module de la même manière que vous importez quelque chose à partir d'un package npm à partir du dossier node_modules: import { something } from 'packagename';. Le problème est que cela ne fonctionne pas hors de la boîte. Les documents Node.js expliquent pourquoi:

Sans '/', './' ou '../' pour indiquer un fichier, le module doit être un module principal ou être chargé à partir d'un dossier node_modules.

Donc, soit vous devez faire ce que Waldo Jeffers et Spain Train suggéré et écrire import { smartForm } from './core', Soit vous pouvez configurer le webpack pour qu'il puisse résoudre votre chemin d'importation via - ses alias qui sont créés pour résoudre ce problème exact.

Débogage du message d'erreur en général

Cette erreur peut se produire si vous essayez d'importer quelque chose à partir d'un package npm existant (dans node_modules) Mais la chose importée n'existe pas dans les exportations . Dans ce cas, assurez-vous qu'il n'y a pas de faute de frappe et que la chose que vous essayez d'importer se trouve bien dans ce package. De nos jours, il est à la mode de diviser les bibliothèques en plusieurs packages npm, vous essayez peut-être d'importer à partir d'un mauvais package .

Donc, si vous obtenez quelque chose comme ça:

TypeError: __webpack_require__.i(...) is not a function  
   at /home/user/code/test/index.js:165080:81  
   at Layer.handle [as handle_request] (/home/user/code/test/index.js:49645:5)

Pour obtenir plus d'informations sur l'importation à vérifier, ouvrez simplement le fichier de sortie généré par webpack et accédez à la ligne marquée par la ligne la plus haute de la pile des erreurs (165080 dans ce cas). Vous devriez voir quelque chose comme: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_9_react_router_dom__["match"]). Cela nous dit qu'il n'y a pas d'export match (ou il y en a mais ce n'est pas une fonction) dans react-router-dom, Donc nous devons vérifier nos trucs autour de cette importation.

7
totymedli

Étant donné que core est un dossier de votre application et non un module npm, Webpack ne peut pas comprendre quel fichier vous souhaitez charger. Vous devez utiliser un chemin correct pointant vers un fichier. Vous devez remplacer import { smartForm } from 'core'; par import { smartForm } from './core/index.js

2
Waldo Jeffers