TypeError:__webpack_require __.i(...)不是一个函数 [英] TypeError: __webpack_require__.i(...) is not a function

问题描述

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

I am getting a webpack TypeError when I am trying to simplify an import. The following code works without any issues. Here I am importing a React Higher-Order-Component (HOC) called smartForm from 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'.因此，我在core/index.js中重新导出了smart-form并从core导入了它.请参见下面的代码:

However, I want to simplify the import to just import { smartForm } from 'core'. So I re-exported smart-form in core/index.js and imported it from core. See the code below:

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);处收到以下运行时异常:

This code compiles without any issues, but I am getting the following runtime exception at the line export default smartForm(LoginForm);:

login-form.jsx:83未捕获的TypeError: webpack_require .i(...)不是函数(...)

login-form.jsx:83 Uncaught TypeError: webpack_require.i(...) is not a function(…)

我想念什么?

P.S.这是我正在使用的圣经和插件版本:

P.S. Here are the Bable and plugin versions that I am using:

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

推荐答案

tl; dr

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

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

• 对于一般读者:确保您尝试导入的东西确实存在于该软件包中.

• For the general audience: Make sure the thing you try to import is indeed exists in that package.

  您尝试以与从node_modules文件夹:import { something } from 'packagename';的npm软件包中导入内容的方式相同的方式导入模块的导出内容.这样做的问题是无法立即使用. Node.js文档提供了有关原因的答案:

  You try to import your module's exports in the same fashion how you import something from an npm package from the node_modules folder: import { something } from 'packagename';. The problem with this is that doesn't work out of the box. The Node.js docs give the answer on why:

  该模块必须是核心模块，或者是从node_modules文件夹中加载的.

  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 和其别名创建，以解决此确切问题.

  So you either has to do what Waldo Jeffers and Spain Train suggested and write import { smartForm } from './core', or you can configure webpack so it can resolve your import path via its aliases which are created to solve this exact problem.

  如果您尝试从现有的npm软件包(在node_modules中)导入某些内容，但是导入的内容在导出中不存在，则会出现此错误.在这种情况下，请确保没有错字，并且您尝试导入的给定内容确实在该程序包中.如今，将库分成多个npm软件包很流行，您可能正试图从错误的软件包中导入.

  This error can arise if you try to import something from an existing npm package (in node_modules) but the imported thing doesn't exist in the exports. In this case, make sure there were no typos and that the given thing you try to import is indeed in that package. Nowadays it is trendy to break libraries into multiple npm packages, you might be trying to import from a wrong package.

  所以，如果您得到这样的信息:

  So if you get something like this:

  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导出(或存在，但是它不是一个函数)，因此我们需要检查该导入周围的内容.

  To get more information on what import you should check, just open the output file generated by webpack and go to the line marked by the topmost line in the error stack (165080 in this case). You should see something like: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_9_react_router_dom__["match"]). This tells us that there is no match export (or there is but it isn't a function) in react-router-dom, so we need to check our stuff around that import.

  这篇关于TypeError:__webpack_require __.i(...)不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！