Reactjs TypeError:\uuuuWebpack\uRequire\uuuuuu.i（…）不是函数

当我试图简化导入时，我遇到一个webpack类型错误。以下代码可以正常工作，没有任何问题。这里我从

core/components/form/index.js

导入一个名为

smartForm

的React高阶组件（HOC）

core/components/form/index.js（进行

smartForm

的命名导出）

登录表单.jsx（导入并使用

smartForm

）

---

但是，我想将导入简化为仅从“core”导入{smartForm}。所以我在

core/index.js

中重新导出了

智能表单

，并从

core

导入了它。请参阅下面的代码：

core/index.js（进行

smartForm

的命名导出）

这段代码编译时没有任何问题，但我在

export default smartForm（LoginForm）一行得到了以下运行时异常：

登录表单.jsx:83未捕获类型错误：webpack\u require.i（…）不是函数（…）

我错过了什么

这里是我正在使用的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",

由于
core
是应用程序的文件夹，而不是npm模块，因此Webpack无法理解您要加载的文件。必须使用指向文件的正确路径。您必须从“核心”替换
import{smartForm}
by
import{smartForm}from./core/index.js
tl；博士

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

解析：{
别名：{
core:path.join（uu dirname，'core'），
},
},

对于一般观众：确保您尝试导入的东西确实存在于该包中


解释
提问者的问题：导入自己的代码，如npm模块
您尝试以与从
node_modules
文件夹从npm包导入内容相同的方式导入模块的导出：
import{something}from'packagename'。问题是这不是开箱即用的。请回答原因：

如果没有前导“/”、“./”或“../”来表示文件，则该模块必须是核心模块，或者是从
node_modules
文件夹加载的

因此，您必须执行和建议的操作，并从“/core”
编写
import{smartForm}，或者您可以配置webpack，以便它能够解析您的导入路径，通过该路径创建的导入路径可以解决此问题

一般情况下调试错误消息
如果您试图从现有npm包（在
节点\单元
中）导入某些内容，但导入的内容在导出中不存在，则可能会出现此错误。在这种情况下，确保没有输入错误，并且您尝试导入的给定内容确实在该包中。现在流行将库拆分为多个npm包，您可能试图从错误的包导入

所以如果你得到这样的结果：

TypeError:\uuuu webpack\uu require.i（…）不是函数
at/home/user/code/test/index.js:165080:81
在Layer.handle[作为handle_请求]（/home/user/code/test/index.js:49645:5）

要获得关于应该检查什么导入的更多信息，只需打开webpack生成的输出文件，并转到错误堆栈中最上面一行标记的行（本例中为165080）。您应该会看到这样的内容：
\uuuu网页包\uu需要\uuuuu.i（\uuu网页包\uu导入的\uu模块\uu9\ureact\u路由器\uu dom\uuuu[“匹配”]）
。这告诉我们，在
react router dom
中没有
match
导出（或者有，但它不是一个函数），因此我们需要检查导入前后的内容。
此错误将因多种原因发生。当我在
文件加载器中添加
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'
 },

从“/core”导入{smartForm}
就足够了。当给定一个目录时，节点模块系统将自动加载
index.js
。()
import { smartForm } from 'core';
class LoginForm extends React.Component {
    ...
}
export default smartForm(LoginForm); // <--- Runtime exception here 

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

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

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