当我尝试简化导入时,收到一个Webpack TypeError。下面的代码可以正常工作。这里我正在从core/components/form/index.js
导入一个名为smartForm
的React高阶组件(HOC)。
- core/components/form/index.js**(执行
smartForm
的命名导出)
- core/components/form/index.js**(执行
export smartForm from './smart-form';
- 登录表单. jsx**(导入和使用
smartForm
)
- 登录表单. jsx**(导入和使用
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
导入,请参见下面的代码:
- core/index. js**(执行
smartForm
的命名导出)
- core/index. js**(执行
export { smartForm } from './components/form';
// export smartForm from './components/form'; <--- Also tried this
- 登录表单. jsx**(导入并使用
smartForm
)
- 登录表单. jsx**(导入并使用
import { smartForm } from 'core';
class LoginForm extends React.Component {
...
}
export default smartForm(LoginForm); // <--- Runtime exception here
这段代码编译起来没有任何问题,但是我在export default smartForm(LoginForm);
行遇到了下面的运行时异常:
登录表单. jsx:83未捕获的类型错误:* * webpack_require**. i(...)不是函数(...)
我错过了什么?
P.S.以下是我正在使用的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",
4条答案
按热度按时间s6fujrry1#
时间;日期
webpack.config.js
:解释
怀疑者的问题:导入自己的代码,如npm模块
您尝试以从
node_modules
文件夹中的npm包导入内容的相同方式导入模块的导出:import { something } from 'packagename';
。这个问题是不能开箱即用。Node.js文档给出了原因的答案:如果没有前导"/"、."/"或.."/"来指示文件,则模块必须是核心模块或从
node_modules
文件夹加载。因此,您要么必须按照Waldo Jeffers和Spain Train的建议编写
import { smartForm } from './core'
,要么可以配置webpack,使其能够通过别名解析您的导入路径,创建别名是为了解决这个确切的问题。调试一般错误消息
如果您尝试从现有的npm包导入某些内容,则可能会出现此错误(在
node_modules
中)但是导入的东西不存在于导出中。在这种情况下,确保没有输入错误并且您尝试导入的给定东西确实在那个包中。现在流行将库分解为多个npm包,* * 您可能尝试从错误的软件包导入**。如果你得到这样的结果:
要获得更多关于您应该检查什么导入的信息,只需打开webpack生成的输出文件,然后转到错误堆栈中最顶端的行(本例中为165080)。这告诉我们在
react-router-dom
中没有match
导出(或者有,但不是函数),因此我们需要检查导入周围的内容。33qvvth12#
由于
core
是应用的文件夹,而不是npm模块,Webpack无法理解您要加载的文件。您必须使用指向文件的正确路径。您必须将import { smartForm } from 'core';
替换为import { smartForm } from './core/index.js
vyswwuz23#
这个错误会发生的原因有很多。一旦我遇到这个错误,当我添加
js
在file-loader
,然后当我删除它开始正常工作。当我删除
|js
时,它可以正常工作f45qwnt84#
只需从配置
const context = resolve.alias.context('./', true, /\.spec\.ts$/); context.keys().map(context);
中删除这2行