TypeError:__ webpack_require __.i(...)不是函数

Question

当我尝试简化导入时,我得到一个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);

但是,我想简化导入到just 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(...)不是函数(...)

我错过了什么？

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

Answer 1

TL;博士

• 对于提问者:将此添加到您的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包(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,所以我们需要检查我们的导入内容.