类型错误：__webpack_require__.i(...) 不是函数

IT技术 reactjs webpack ecmascript-6 babeljs es6-module-loader
2021-04-28 09:28:13

当我尝试简化导入时，出现 webpack TypeError。以下代码可以正常工作。在这里，我正在导入一个名为smartFormfrom的 React 高阶组件 (HOC) core/components/form/index.js。

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(...) is not a function(...)

我错过了什么？

PS 这是我使用的 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",
3个回答

tl;博士

  • 对于提问者：将此添加到您的webpack.config.js：

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

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

解释

发问者的问题：像 npm module一样导入自己的代码

您尝试以与从node_modules文件夹中的 npm 包导入内容相同的方式导入module的导出：import { something } from 'packagename';. 问题在于它不能开箱即用。在Node.js的文档给出为什么答案：

如果没有前导“/”、“./”或“../”来指示文件，则该module必须是核心module或从node_modules文件夹加载。

所以你要么必须按照Waldo Jeffers和西班牙火车的 建议和编写import { smartForm } from './core'，要么你可以配置 webpack 以便它可以通过它的别名解析你的导入路径，这些别名是为了解决这个确切的问题而创建的。

一般调试错误信息

如果您尝试从现有 npm 包 (in 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"])。这告诉我们在 中没有match导出（或者有但不是函数）react-router-dom，因此我们需要围绕该导入检查我们的内容。

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

发生此错误的原因有很多。一旦我在添加时遇到此错误js， file-loader然后当我删除它时它开始正常工作。

 {
     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'
 },
其它你可能感兴趣的问题
上一篇悬垂上升 下一篇当路径更改时，Webpack 从错误的 URL 加载