TypeError：__webpack_require __。i（…）不是一个函数

Question

我在尝试简化导入时遇到webpack
TypeError。以下代码可以正常工作。在这里，我导入了一个smartForm从调用的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未捕获的TypeError： webpack_require .i（…）不是函数（…）

我想念什么？

PS这是我正在使用的圣经和插件版本：

"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; dr

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

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

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

说明

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

您尝试以与从node_modules文件夹中的npm包中导入内容相同的方式导入模块的导出内容：import { something } from 'packagename';。这样做的问题是无法立即使用。在Node.js的文档给出为什么答案：

如果没有以“ /”、“./”或“ ../”开头的文件，则该模块必须是核心模块，或者是从node_modules文件夹加载的。

因此，您必须按照Waldo Jeffers 建议进行操作并编写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"])。这告诉我们，中没有match导出（或存在，但是它不是一个函数）react-router-dom，因此我们需要检查该导入周围的内容。