Question

当我尝试简化导入时，我得到一个webpack TypeError。以下代码无任何问题。在这里，我从smartForm导入名为core/components/form/index.js的React高阶组件（HOC）。

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导入了smartForm。请参阅以下代码：

core / index.js （export { smartForm } from './components/form'; // export smartForm from './components/form'; <--- Also tried this的命名导出

smartForm

login-form.jsx （导入并使用import { smartForm } from 'core'; class LoginForm extends React.Component { ... } export default smartForm(LoginForm); // <--- Runtime exception here）

export default smartForm(LoginForm);

此代码编译没有任何问题，但我在"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",行获得以下运行时异常：

login-form.jsx：83未捕获TypeError： webpack_require .i（...）不是函数（...）

我错过了什么？

P.S。以下是我正在使用的Bable和插件版本：

data access class library

Answer 1

TL;博士

对于提问者：将其添加到webpack.config.js：

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

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

说明

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

您尝试导入模块的导出方式与从node_modules文件夹导入npm包中的内容的方式相同：import { something } from 'packagename';。这个问题是没有开箱即用的工作。 Node.js docs给出了原因的答案：

没有领先＆＃39; /＆＃39;，＆＃39;。/＆＃39;或＆＃39; ../'要指示文件，模块必须是核心模块或从node_modules文件夹加载。

因此，您必须执行Waldo Jeffers和Spain Train建议并编写import { smartForm } from './core'，或者您可以配置webpack，以便它可以通过its aliases解析您的导入路径创建来解决这个确切的问题。

一般调试错误消息

如果您尝试从现有的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导出（或者它不是一个函数），所以我们需要检查我们的导入内容。

Answer 2

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

Answer 3

发生此错误的原因有很多。一旦我在 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'
 },

TypeError：__ webpack_require __。i（...）不是函数

3 个答案:

TL;博士

说明

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

一般调试错误消息