reactjs - 类型错误 : __webpack_require__. i(...) 不是函数

Question

当我尝试简化导入时，出现了 webpack TypeError。以下代码可以正常运行，没有任何问题。在这里，我从 core/components/form/index.js 导入一个名为 smartForm 的 React 高阶组件 (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'。因此，我在 core/index.js 中重新导出了 smart-form，并从 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(...) is not a function(…)

我错过了什么？

附注以下是我正在使用的 Bable 和插件版本:

"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",

Answer 1

tl;博士

• 对于提问者:将其添加到您的 webpack.config.js 中:

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

• 对于一般受众:请确保您尝试导入的内容确实存在于该包中。

说明

提问者的问题:导入自己的代码，例如 npm 模块

您尝试以与从 node_modules 文件夹中的 npm 包导入某些内容相同的方式导入模块的导出:import { some } from 'packagename'; 。问题是它不能开箱即用。 Node.js docs给出原因的答案:

Without a leading '/', './', or '../' to indicate a file, the module must either be a core module or is loaded from a node_modules folder.

所以你要么必须做Waldo Jeffers和Spain Train建议并编写 import { smartForm } from './core'，或者您可以配置 webpack，以便它可以通过 its aliases 解析您的导入路径这些都是为了解决这个问题而创建的。

一般调试错误消息

如果您尝试从现有 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 导出(或者有但它不是一个函数)，所以我们需要检查我们的东西那个导入。