web-dev-qa-db-ja.com

TypeError：__webpack_require __。i（...）は関数ではありません

インポートを簡略化しようとすると、webpack TypeErrorが発生します。次のコードは問題なく動作します。ここではcore/components/form/index.jsからsmartFormと呼ばれるReact Higher-Order-Component（HOC）をインポートしています。

core/components/form/index.js（smartFormの名前付きエクスポートを行います）

export smartForm from './smart-form';

login-form.jsx（smartFormをインポートして使用）

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

ただし、import { smartForm } from 'core'だけにインポートを簡略化したいと思います。そのため、smart-formをcore/index.jsに再エクスポートし、coreからインポートしました。以下のコードを参照してください。

core/index.js（smartFormの名前付きエクスポートを行います）

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

login-form.jsx（smartFormをインポートして使用）

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

このコードは問題なくコンパイルされますが、export default smartForm(LoginForm);行で次のランタイム例外が発生します。

login-form.jsx：83 Uncaught TypeError：webpack_require。i（...）は関数ではありません（…）

何が欠けていますか？

追伸ここに私が使用している聖書とプラグインのバージョンがあります：

"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

  • 質問者の場合：これを_webpack.config.js_に追加します。

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

  • 一般ユーザー向け：インポートしようとしているものが実際にそのパッケージに存在することを確認してください。

説明

質問者の問題：npmモジュールのような独自のコードのインポート

_node_modules_フォルダーからnpmパッケージから何かをインポートするのと同じ方法でモジュールのエクスポートをインポートしようとします：_import { something } from 'packagename';_。この問題は、そのままでは機能しないことです。 Node.js docs はその理由を答えます：

先頭に「/」、「./」、または「../」を付けずにファイルを示す場合、モジュールはコアモジュールであるか、または_node_modules_フォルダーから読み込まれる必要があります。

だから、あなたは Waldo Jeffers と Spain Train が提案することを実行し、_import { smartForm } from './core'_と書く必要があります。 そのエイリアス この正確な問題を解決するために作成されます。

一般的なエラーメッセージのデバッグ

このエラーは、既存のnpmパッケージ（_node_modules_内）から何かをインポートしようとしたが、インポートされたものがエクスポートに存在しない場合に発生する可能性があります。この場合、タイプミスがないことを確認し、インポートしようとしているものがそのパッケージに含まれていることを確認してください。現在では、ライブラリを複数のnpmパッケージに分割するのがトレンドです間違ったパッケージからインポートしようとしている可能性があります。

だからあなたがこのようなものを手に入れたら：

_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)
_

チェックする必要のあるインポートに関する詳細情報を取得するには、webpackによって生成された出力ファイルを開き、エラースタックの一番上の行（この場合は165080）でマークされた行に移動します。 __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_9_react_router_dom__["match"])のように表示されます。これは、_react-router-dom_にmatchエクスポートがない（または存在するが関数ではない）ことを示しています。そのため、そのインポートに関するものを確認する必要があります。

7
totymedli

coreはアプリのフォルダーであり、npmモジュールではないため、Webpackはロードするファイルを認識できません。ファイルを指す正しいパスを使用する必要があります。 import { smartForm } from 'core';をimport { smartForm } from './core/index.jsに置き換える必要があります

2
Waldo Jeffers