类型错误：__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';

登录表单.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(...)不是一个函数(…)

我错过了什么？

附注：我使用的Babel和插件版本如下：

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

- Naresh

Answer 1

简介

• 对于提问者：将以下内容添加到你的webpack.config.js文件中：

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

• 对于普通用户：确保您尝试导入的内容确实存在于该软件包中。

解释

问题提出者遇到的问题：像npm模块一样导入自己的代码

你尝试以与从node_modules文件夹中导入npm包中的内容相同的方式导入模块导出，例如：import { something } from 'packagename';。但是这种方法通常不会奏效。Node.js文档在此处给出了原因：

如果没有前导的'/'、'./'或'../'来表示文件，那么该模块必须是核心模块或从node_modules文件夹加载。

因此，你可以按照Waldo Jeffers和Spain Train 建议的方法，写成import { smartForm } from './core'，或者配置webpack以通过别名解析导入路径，这些别名是为解决此问题而创建的。

一般情况下调试错误信息

如果你尝试从现有的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导出 (或者有，但不是一个函数)，所以我们需要检查与该导入相关的内容。

- totymedli

Answer 2

由于core是您的应用程序中的一个文件夹，而不是npm模块，因此Webpack无法理解您要加载哪个文件。您必须使用正确的路径指向文件。您必须将import { smartForm } from 'core';替换为import { smartForm } from './core/index.js'

- Waldo Jeffers

---

import { smartForm } from './core' 就足够了。当给定一个目录时，节点模块系统会自动加载 index.js。(https://nodejs.org/api/modules.html#modules_folders_as_modules) - Spain Train

Answer 3

从配置文件中删除这两行代码 const context = resolve.alias.context('./', true, /\.spec\.ts$/); context.keys().map(context);

- Ravishankar

---

这个答案与 https://dev59.com/ruk5XIcBkEYKwwoY2NDV#74572172 相同。 - Christian Davén

Answer 4

这个错误会因为很多原因而发生。有一次我在file-loader中添加了js，然后当我将其删除后，它开始正常工作。

 {
     test: /\.(ttf|eot|svg|gif|jpg|png|js)(\?[\s\S]+)?$/,
     use: 'file-loader'
 },

当我移除 |js 时它可以工作

 {
     test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
     use: 'file-loader'
 },

- Abdulhakim Zeinu