インポートを簡略化しようとすると、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",
質問者の場合:これを_webpack.config.js
_に追加します。
_resolve: {
alias: {
core: path.join(__dirname, 'core'),
},
},
_
一般ユーザー向け:インポートしようとしているものが実際にそのパッケージに存在することを確認してください。
_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
エクスポートがない(または存在するが関数ではない)ことを示しています。そのため、そのインポートに関するものを確認する必要があります。
core
はアプリのフォルダーであり、npmモジュールではないため、Webpackはロードするファイルを認識できません。ファイルを指す正しいパスを使用する必要があります。 import { smartForm } from 'core';
をimport { smartForm } from './core/index.js
に置き換える必要があります